/* Tekiji design tokens — self-hosted fonts, OKLCH palette, 4pt spacing scale.
   Every colour and font in styles.css references these by name. */

/* ---- self-hosted fonts (OFL; licenses in fonts/) — zero third-party requests ---- */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/newsreader-600.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plexsans-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/plexsans-600.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plexsans-400i.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plexmono-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/plexmono-600.woff2") format("woff2");
}

/* Metric-matched local fallbacks — prevent layout shift while woff2 loads. */

@font-face {
  font-family: "Newsreader Fallback";
  src: local("Georgia");
  size-adjust: 95.91%;
  ascent-override: 73.5%;
  descent-override: 26.5%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Plex Sans Fallback";
  src: local("Arial");
  size-adjust: 101.57%;
  ascent-override: 102.5%;
  descent-override: 27.5%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Plex Mono Fallback";
  src: local("Courier New");
  size-adjust: 99.98%;
  ascent-override: 102.5%;
  descent-override: 27.5%;
  line-gap-override: 0%;
}

/* ---- tokens ---- */

:root {
  --font-display: "Newsreader", "Newsreader Fallback", "Iowan Old Style", Georgia, serif;
  --font-body: "IBM Plex Sans", "Plex Sans Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-data: "IBM Plex Mono", "Plex Mono Fallback", "Courier New", monospace;

  /* palette — cool-blue anchor over warm paper (financial print) */
  --paper:        oklch(98.2% 0.005 84.6);    /* #fbf9f5 */
  --surface:      oklch(99.5% 0.005 78.3);    /* #fffdfa */
  --ink:          oklch(20.9% 0.0104 268.2);  /* #16181d */
  --muted:        oklch(50.1% 0.0216 258.4);  /* #5c6470 — 5.68:1 on paper */
  --faint:        oklch(54.2% 0.0278 259.8);  /* #667080 — 4.76:1 on paper */
  --hairline:     oklch(90.7% 0.0087 84.6);   /* #e3e0da — decorative rules */
  --border-input: oklch(63.0% 0.0268 267.8);  /* #82899a — ≥3:1 boundary */
  --accent:       oklch(49.1% 0.2156 264.5);  /* #1f4fd8 — 6.30:1 on paper */
  --accent-hover: oklch(42.0% 0.1817 265.0);  /* #1a3fae */
  --accent-ink:   oklch(99.4% 0.005 84.6);    /* #fffdf9 — 6.51:1 on accent */
  --error:        oklch(50.1% 0.1812 27.9);   /* #b4231f — 6.46:1 on surface */
  --ok:           oklch(46.9% 0.1063 152.6);  /* #1d6b3c — 6.42:1 on surface */

  /* spacing — 4pt scale, named steps only */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* type scale */
  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1.0625rem;
  --text-lede:    1.1875rem;
  --text-title:   1.75rem;
  --text-display: clamp(2rem, 1.1rem + 2.6vw, 2.75rem);
  --text-figure:  clamp(2.75rem, 1rem + 5vw, 5.5rem);

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short: 160ms;

  /* shape */
  --radius-card: 6px;
  --radius-control: 4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        oklch(18.2% 0.0088 264.3);  /* #101216 */
    --surface:      oklch(21.7% 0.0127 264.3);  /* #171a20 */
    --ink:          oklch(92.5% 0.0071 88.6);   /* #e8e6e1 */
    --muted:        oklch(70.7% 0.0179 259.4);  /* #9aa1ac — 6.69:1 on surface */
    --faint:        oklch(68.0% 0.0218 257.5);  /* #9099a6 — 6.05:1 on surface */
    --hairline:     oklch(28.4% 0.0141 261.7);  /* #262a31 */
    --border-input: oklch(51.4% 0.0234 257.5);  /* #5f6875 — ≥3:1 boundary */
    --accent:       oklch(72.5% 0.1419 266.5);  /* #7da2ff — 7.57:1 on paper */
    --accent-hover: oklch(80.1% 0.0994 268.4);  /* #a3bcff */
    --accent-ink:   oklch(20.2% 0.0568 268.9);  /* #0c1430 — 7.32:1 on accent */
    --error:        oklch(75.9% 0.1435 26.1);   /* #ff8a80 — 7.63:1 on surface */
    --ok:           oklch(79.8% 0.1158 153.4);  /* #7fd39a — 9.70:1 on surface */
  }
}