/*
 * Design tokens for timothyjordan.com
 *
 * Single source of truth, consumed by:
 *   - public/css/main.css            (home)
 *   - blog/_sass/_tj-tokens.scss     (blog, mirrored)
 *   - resume/_sass/_tj-tokens.scss   (resume, mirrored)
 *
 * Spec: DESIGN.md
 */

/* ------------------------------------------------------------ Fonts */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/fonts/newsreader-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/fonts/newsreader-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(/fonts/newsreader-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(/fonts/newsreader-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metric-adjusted fallbacks. While Inter / Newsreader are loading,
 * the browser renders with these synthetic families: a wrapped system
 * font with overridden metrics, sized so the line boxes and advance
 * widths match the eventual web font. This eliminates the layout
 * shift when the web font swaps in. Values are well-known Capsize-
 * derived overrides for these specific pairings. */

@font-face {
  font-family: 'Inter Fallback';
  src: local('Helvetica Neue'), local('Arial');
  size-adjust: 107.4%;
  ascent-override: 90%;
  descent-override: 22.43%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Newsreader Fallback';
  src: local('Charter'), local('Iowan Old Style'), local('Georgia');
  size-adjust: 100%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* ------------------------------------------------------------ Tokens */

:root {
  /* Type families */
  --font-serif: 'Newsreader', 'Newsreader Fallback', Charter, 'Iowan Old Style', Georgia, serif;
  --font-sans:  'Inter', 'Inter Fallback', -apple-system, system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:  'JetBrains Mono', 'Berkeley Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Paper, warm and faintly cream, never pure white */
  --paper:        oklch(98.5% 0.006 85);
  --paper-deep:   oklch(96%   0.008 85);
  --paper-sunk:   oklch(93%   0.010 85);

  /* Hairlines */
  --rule:         oklch(88%   0.012 85);
  --rule-strong:  oklch(78%   0.014 85);

  /* Ink, warm near-black, never pure black */
  --ink:          oklch(22%   0.018 270);
  --ink-soft:     oklch(38%   0.018 270);
  --ink-faint:    oklch(58%   0.016 270);

  /* Accent, peacock blue (fountain-pen ink) */
  --accent:       oklch(52%   0.13  220);
  --accent-deep:  oklch(40%   0.12  220);
  --accent-wash:  oklch(94%   0.022 220);

  /* Spacing scale, 4px baseline */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 36px;
  --space-7: 56px;
  --space-8: 88px;
  --space-9: 128px;

  /* Radii, paper does not have rounded corners */
  --radius-1: 2px;
  --radius-2: 4px;

  /* Reading column */
  --measure: 68ch;
}

/* ------------------------------------------------------------ Selection */

::selection {
  background: var(--accent-wash);
  color: var(--ink);
}