/* ============================================================
   TOKENS — Jacqueline Yang portfolio
   Ported from the design-system bundle. Values are final.
   Do not restyle pages with raw hex values; use these tokens.
   ============================================================ */

/* Webfonts — self-hosted in assets/fonts (SIL Open Font License).
   Display: Instrument Serif 400 (single weight — never bolded).
   Body:    Inter (variable: weight 100–900; 400 and 500 used).
   Mono:    IBM Plex Mono 400 / 500. */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/InstrumentSerif-Regular.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../assets/fonts/Inter-Variable.woff2") format("woff2-variations")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/IBMPlexMono-Regular.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/IBMPlexMono-Medium.woff2") format("woff2")}

:root{
  /* ---- Base ramps ---- */
  /* Oxblood — sampled from the JY monogram */
  --ox-900:#320607;--ox-800:#4A0A0D;--ox-700:#5A0C10;--ox-600:#6F0E12;--ox-500:#8A1B20;
  --ox-400:#A94A4E;--ox-300:#C88C8F;--ox-200:#E7C9CA;--ox-100:#F6EAEA;
  /* Ink — warm near-black neutrals */
  --ink-900:#121110;--ink-800:#1D1B19;--ink-700:#2C2926;--ink-600:#413D39;--ink-500:#57524C;
  --ink-400:#7B746C;--ink-300:#A39B92;--ink-200:#CAC3BA;--ink-100:#E4DED6;
  /* Paper — white page, neutral greys for rules and plates */
  --paper-000:#FFFFFF;--paper-050:#FFFFFF;--paper-100:#F4F4F4;--paper-200:#ECECEC;
  --grey-rule:#E4E4E4;
  --cream:#FAF8F5;              /* brand cream — cursor inversion, inverse-surface text */

  /* ---- Semantic: text ---- */
  --text-primary:var(--ink-900);
  --text-secondary:var(--ink-500);
  --text-muted:var(--ink-400);
  --text-faint:var(--ink-300);
  --text-brand:var(--ox-600);
  --text-inverse:var(--paper-050);
  --text-link:var(--ox-600);
  --text-link-hover:var(--ox-800);

  /* ---- Semantic: surface ---- */
  --surface-page:var(--paper-000);
  --surface-sunken:var(--paper-100);
  --surface-inverse:var(--ink-900);

  /* ---- Semantic: border ---- */
  --border-subtle:var(--grey-rule);  /* every rule on the site */
  --border-strong:var(--ink-900);
  --focus-ring:var(--ox-500);
  --selection-bg:var(--ox-200);
  --selection-fg:var(--ox-900);

  /* ---- Type ---- */
  --font-display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --font-sans:"Inter",-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --text-2xs:11px;--text-xs:12px;--text-sm:14px;--text-base:16px;--text-lg:18px;
  --weight-regular:400;--weight-medium:500;
  --tracking-display:-0.01em;
  --tracking-label:0.14em;
  --tracking-eyebrow:0.16em;

  --type-body:var(--weight-regular) var(--text-base)/1.7 var(--font-sans);
  --type-label:var(--weight-medium) var(--text-xs)/1.2 var(--font-mono);
  --type-meta:var(--weight-regular) var(--text-xs)/1.4 var(--font-mono);

  /* ---- Spacing (4px base) ---- */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
  --space-6:24px;--space-7:32px;--space-8:40px;--space-9:48px;--space-10:64px;

  /* ---- Radii — near-square everywhere; the pill is for the SEE MORE button only ---- */
  --radius-0:0px;--radius-pill:999px;

  /* ---- Motion ---- */
  --dur-fast:160ms;--dur-base:240ms;--dur-slow:420ms;--dur-reveal:720ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-entrance:cubic-bezier(.22,1,.36,1);
  --stagger:70ms;
  --reveal-distance:28px;
  --transition-control:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);

  /* ---- Layers ---- */
  --z-header:100;
  --shadow-focus:0 0 0 2px var(--surface-page),0 0 0 4px var(--focus-ring);
}

/* Inverse region — the footer band */
[data-theme="inverse"]{
  --surface-page:var(--ink-900);
  --surface-sunken:var(--ink-800);
  --text-primary:var(--paper-050);
  --text-secondary:var(--ink-300);
  --text-muted:var(--ink-400);
  --text-brand:var(--ox-300);
  --text-link:var(--ox-300);
  --text-link-hover:var(--ox-200);
  --border-subtle:rgba(250,248,245,.24);
  --border-strong:var(--paper-050);
}