/* ================================================================
   TOKENS
   All custom properties: color, type, spacing, grid, motion, z-index.
   Structure is portable; color values are project-specific.
   ================================================================ */


@font-face { font-family: 'TeX Gyre Heros'; src: url('/fonts/texgyreheros-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'TeX Gyre Heros'; src: url('/fonts/texgyreheros-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'TeX Gyre Heros'; src: url('/fonts/texgyreheros-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'TeX Gyre Heros'; src: url('/fonts/texgyreheros-bolditalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'TeX Gyre Heros CN'; src: url('/fonts/texgyreheroscn-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'TeX Gyre Heros CN'; src: url('/fonts/texgyreheroscn-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'TeX Gyre Heros CN'; src: url('/fonts/texgyreheroscn-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'TeX Gyre Heros CN'; src: url('/fonts/texgyreheroscn-bolditalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Unifont'; src: url('/fonts/unifont-17.0.03.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face {
  font-family: 'Satoshi-Light';
  src: url('../fonts/Satoshi-Light.woff2') format('woff2'),
       url('../fonts/Satoshi-Light.woff') format('woff'),
       url('../fonts/Satoshi-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi-LightItalic';
  src: url('../fonts/Satoshi-LightItalic.woff2') format('woff2'),
       url('../fonts/Satoshi-LightItalic.woff') format('woff'),
       url('../fonts/Satoshi-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Satoshi-Regular';
  src: url('../fonts/Satoshi-Regular.woff2') format('woff2'),
       url('../fonts/Satoshi-Regular.woff') format('woff'),
       url('../fonts/Satoshi-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi-Italic';
  src: url('../fonts/Satoshi-Italic.woff2') format('woff2'),
       url('../fonts/Satoshi-Italic.woff') format('woff'),
       url('../fonts/Satoshi-Italic.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Satoshi-Medium';
  src: url('../fonts/Satoshi-Medium.woff2') format('woff2'),
       url('../fonts/Satoshi-Medium.woff') format('woff'),
       url('../fonts/Satoshi-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi-MediumItalic';
  src: url('../fonts/Satoshi-MediumItalic.woff2') format('woff2'),
       url('../fonts/Satoshi-MediumItalic.woff') format('woff'),
       url('../fonts/Satoshi-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Satoshi-Bold';
  src: url('../fonts/Satoshi-Bold.woff2') format('woff2'),
       url('../fonts/Satoshi-Bold.woff') format('woff'),
       url('../fonts/Satoshi-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi-BoldItalic';
  src: url('../fonts/Satoshi-BoldItalic.woff2') format('woff2'),
       url('../fonts/Satoshi-BoldItalic.woff') format('woff'),
       url('../fonts/Satoshi-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Satoshi-Black';
  src: url('../fonts/Satoshi-Black.woff2') format('woff2'),
       url('../fonts/Satoshi-Black.woff') format('woff'),
       url('../fonts/Satoshi-Black.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi-BlackItalic';
  src: url('../fonts/Satoshi-BlackItalic.woff2') format('woff2'),
       url('../fonts/Satoshi-BlackItalic.woff') format('woff'),
       url('../fonts/Satoshi-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'Satoshi-Variable';
  src: url('../fonts/Satoshi-Variable.woff2') format('woff2'),
       url('../fonts/Satoshi-Variable.woff') format('woff'),
       url('../fonts/Satoshi-Variable.ttf') format('truetype');
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}
/* ================================================================
   tokens.css — Design tokens
   All custom properties. Portable across projects when
   authoring-surface values (colors, fonts) are swapped.
   ================================================================ */

:root {

  /* ── Authoring-surface colors ──
     Private values. Override these per-project.
     Public tokens below derive from them. */
  --_bg: #0b0b0b;
  --_fg: #F7F5FB;

  /* ── Public color tokens ── */
  --c-bg:     var(--_bg);
  --c-fg:     var(--_fg);
  --c-accent: #FF3B00;

  /* Document type colors — flat, saturated, no opacity */
  --c-stu: #c5c6c7;
  --c-pro: #818283;
  --c-dic: #4f5052;
  --c-dsp: #282728;

  /* Derived UI tokens */
  --c-rule:      color-mix(in srgb, var(--c-fg) 12%, transparent);
  --c-dim:       color-mix(in srgb, var(--c-fg) 40%, transparent);
  --c-ghost:     color-mix(in srgb, var(--c-fg) 8%, transparent);
  --c-selection: color-mix(in srgb, var(--c-accent) 25%, transparent);

  /* Code block chrome */
  --c-code-bg:      color-mix(in srgb, var(--c-fg) 6%, transparent);
  --c-code-header:  color-mix(in srgb, var(--c-fg) 10%, transparent);
  --c-code-border:  color-mix(in srgb, var(--c-fg) 15%, transparent);

  /* ── Type scale — perfect fifth (×1.5), 16px anchor ──
     --fs-2 (1rem = 16px) is body text.
     Steps 0–1 are sub-body (metadata, captions).
     Steps 3+ are headings and display. */
  --fs-0:  0.444rem;   /*  ≈7.1px  — superscript, footnote counters */
  --fs-1:  0.667rem;   /* ≈10.7px  — captions, timestamps, tiny meta */
  --fs-2:  1rem;       /*   16px   — body text */
  --fs-3:  1.5rem;     /*   24px   — large body, section heads */
  --fs-4:  2.25rem;    /*   36px   — h2 */
  --fs-5:  3.375rem;   /*   54px   — h1 */
  --fs-6:  5.063rem;   /* ≈81px    — display */
  --fs-7:  7.594rem;   /* ≈121px   — large display */
  --fs-8:  11.391rem;  /* ≈182px   — extra-large display */
  --fs-9:  17.086rem;  /* ≈273px   — titling upper bound */
  --fs-10: 25.629rem;  /* ≈410px   — clamp ceiling */

  /* Viewport-responsive title size */
  --fs-vw-title: clamp(var(--fs-6), 10vw, var(--fs-9));

  /* ── Leading ── */
  --lh-body:    1.3;
  --lh-tight:   0.95;
  --lh-display: 0.84;

  /* ── Measure ── */
  --measure: 60ch;

  /* ── Spacing — 8px baseline grid ── */
  --sp-1:  0.5rem;    /*   8px */
  --sp-2:  1rem;      /*  16px */
  --sp-3:  1.5rem;    /*  24px */
  --sp-4:  2rem;      /*  32px */
  --sp-5:  2.5rem;    /*  40px */
  --sp-6:  3rem;      /*  48px */
  --sp-8:  4rem;      /*  64px */
  --sp-10: 5rem;      /*  80px */
  --sp-12: 6rem;      /*  96px */
  --sp-16: 8rem;      /* 128px */

  /* ── Grid geometry ── */
  --grid-cols:   16;
  --grid-gutter: 0.75rem;
  --grid-margin: 1rem;
  --grid-max:    100%;

  /* ── Letter-spacing ── */
  --ls-tight: -0.02em;
  --ls-body:   0.01em;
  --ls-meta:   0.04em;
  --ls-wide:   0.08em;

  /* ── Font stacks ── */
  --ff-sans:  "TeX Gyre Heros", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-mono:  "Unifont", "OCR-B", monospace;
  --ff-serif: "Source Serif 4", "Noto Serif", serif;

  /* ── Motion ── */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-med:  250ms;
  --dur-slow: 500ms;

  /* ── Z-index ── */
  --z-base:    0;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-tooltip: 300;

  /* ── Shell geometry ── */
  --header-height: 2.5rem;
}

/* ── Responsive token overrides ── */

@media (min-width: 768px) {
  :root {
    --grid-gutter:   1rem;
    --grid-margin:   2rem;
    --header-height: 3rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --grid-margin: 3rem;
  }
}

/* ── Light theme ── */

[data-theme="light"] {
  --_bg: var(--_fg);
  --_fg: var(--_bg);



  --c-rule:      color-mix(in srgb, var(--c-fg) 15%, transparent);
  --c-dim:       color-mix(in srgb, var(--c-fg) 35%, transparent);
  --c-ghost:     color-mix(in srgb, var(--c-fg) 6%, transparent);
  --c-selection: color-mix(in srgb, var(--c-accent) 20%, transparent);

  --c-code-bg:      color-mix(in srgb, var(--c-fg) 4%, transparent);
  --c-code-header:  color-mix(in srgb, var(--c-fg) 7%, transparent);
  --c-code-border:  color-mix(in srgb, var(--c-fg) 12%, transparent);
}

/* ── Selection ── */
::selection {
  background: var(--c-selection);
  color: var(--c-fg);
}