/* =====================================================================
   tokens.css — appliedbits design tokens
   Single source of truth for color, type, spacing, scale.
   Values per BRAND.md §5 (color), §6 (typography).
   ===================================================================== */

/* ---------- Font face declarations ---------- */

/* IBM Plex Sans — primary sans, wordmark, ui chrome, headings */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/IBMPlexSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/IBMPlexSans-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/IBMPlexSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/IBMPlexSans-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/IBMPlexSans-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* Source Serif 4 — body, entries, default reading face */
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/SourceSerif4Variable-Roman.woff2') format('woff2-variations'),
       url('/fonts/SourceSerif4Variable-Roman.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/SourceSerif4Variable-Italic.woff2') format('woff2-variations'),
       url('/fonts/SourceSerif4Variable-Italic.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* JetBrains Mono — apparatus, metadata, code */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

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

:root {
  /* Color — paper (warm off-whites) */
  --paper-50:  #FBF8F2;  /* page background */
  --paper-100: #F4EFE4;  /* card / surface */
  --paper-200: #E8E1D1;  /* rules, borders */
  --paper-300: #D4CBB6;  /* muted borders */

  /* Color — ink (warm near-blacks) */
  --ink-950: #1A1712;  /* primary text */
  --ink-800: #2B2820;  /* display, emphasis */
  --ink-600: #4A463B;  /* secondary text */
  --ink-400: #7A7364;  /* tertiary, mono metadata */
  --ink-300: #9A9382;  /* disabled, faint */

  /* Color — press (warm vermilion accent) */
  --press-600: #B8391E;  /* links, rare emphasis */
  --press-500: #C94325;  /* link hover */
  --press-100: #F3DED3;  /* pullquote bg, selection */

  /* Foreground / background semantic aliases */
  --bg-page:    var(--paper-50);
  --bg-surface: var(--paper-100);
  --bg-rule:    var(--paper-200);
  --fg-primary:   var(--ink-950);
  --fg-display:   var(--ink-800);
  --fg-secondary: var(--ink-600);
  --fg-tertiary:  var(--ink-400);
  --fg-faint:     var(--ink-300);
  --fg-accent:    var(--press-600);
  --fg-accent-hover: var(--press-500);

  /* Type families */
  --font-sans:  'IBM Plex Sans', system-ui, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale */
  --fs-10: 0.625rem;   /* 10px — mono micro labels */
  --fs-12: 0.75rem;    /* 12px — mono apparatus */
  --fs-14: 0.875rem;   /* 14px — small ui */
  --fs-16: 1rem;       /* 16px — base ui sans */
  --fs-18: 1.125rem;   /* 18px — body serif */
  --fs-20: 1.25rem;    /* 20px — large body */
  --fs-24: 1.5rem;     /* 24px — h3 */
  --fs-28: 1.75rem;    /* 28px — large block, italic display */
  --fs-32: 2rem;       /* 32px — h2 */
  --fs-40: 2.5rem;     /* 40px — h1 */
  --fs-56: 3.5rem;     /* 56px — hero wordmark */

  /* Line heights */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-prose:   1.6;
  --lh-loose:   1.8;

  /* Tracking */
  --tr-tight-display: -0.012em;
  --tr-tight:         -0.005em;
  --tr-normal:        0;
  --tr-mono:          0.02em;
  --tr-mono-caps:     0.08em;
  --tr-caps:          0.08em;
  --tr-wordmark:      -0.005em;

  /* Spacing scale (8px base) */
  --s-1: 0.25rem;   /* 4px */
  --s-2: 0.5rem;    /* 8px */
  --s-3: 0.75rem;   /* 12px */
  --s-4: 1rem;      /* 16px */
  --s-5: 1.5rem;    /* 24px */
  --s-6: 2rem;      /* 32px */
  --s-7: 3rem;      /* 48px */
  --s-8: 4.5rem;    /* 72px */
  --s-9: 6.75rem;   /* 108px */

  /* Measure (max line length for prose) */
  --measure-prose:  66ch;
  --measure-narrow: 52ch;
  --measure-wide:   72ch;

  /* Radii — minimal use */
  --r-1: 2px;
  --r-2: 4px;

  /* Layout */
  --page-max:    920px;
  --page-pad-x:  clamp(1.25rem, 4vw, 3rem);
  --page-pad-y:  clamp(2.5rem, 6vw, 4rem);
}