/* tokens.css: the ONLY file in CIO Cafe allowed to hold raw visual values.
   Primitives -> semantic tokens -> components. Change the brand here, nowhere else. */
@layer reset, tokens, base, layout, components, utilities;

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallbacks keep CLS near zero while fonts swap in */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@layer tokens {
  :root {
    color-scheme: light;

    /* ---------- Primitives: roast ladder (hue ~55) ---------- */
    --hue: 55;
    --paper-0: oklch(98.6% 0.008 85);
    --paper-1: oklch(96.8% 0.013 82);
    --paper-2: oklch(94.2% 0.018 78);
    --paper-3: oklch(90.5% 0.022 75);
    --paper-4: oklch(84% 0.026 72);
    --bean-6: oklch(62% 0.03 60);
    --bean-7: oklch(52% 0.032 58);
    --bean-8: oklch(42% 0.03 55);
    --bean-9: oklch(31% 0.026 52);
    --bean-10: oklch(24% 0.022 50);
    --bean-11: oklch(19.5% 0.018 48);
    --bean-12: oklch(16% 0.014 46);
    --copper-3: oklch(93% 0.04 55);
    --copper-5: oklch(78% 0.1 55);
    --copper-6: oklch(72% 0.13 52);
    --copper-8: oklch(56% 0.15 42);
    --copper-9: oklch(50% 0.145 40);
    --copper-10: oklch(45% 0.13 38);
    --sage-3: oklch(94% 0.03 150);
    --sage-9: oklch(50% 0.09 155);
    --sage-11: oklch(38% 0.07 155);
    --amber-9: oklch(74% 0.14 80);
    --red-9: oklch(54% 0.18 25);

    --latte-2: oklch(93.2% 0.028 70);
    --latte-3: oklch(90% 0.034 66);
    --spine-1: var(--bean-11);
    --spine-2: var(--copper-9);
    --spine-3: oklch(36% 0.05 160);
    --spine-4: var(--paper-3);
    --spine-5: var(--paper-2);

    /* ---------- Space (4px base) ---------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;
    --section-y: clamp(4rem, 3rem + 5vw, 8rem);
    --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
    --container: 76rem;
    --measure: 65ch;
    --nav-h: 4rem;

    /* ---------- Type ---------- */
    --font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
    --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1.0625rem;
    --fs-md: 1.1875rem;
    --fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --fs-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
    --fs-2xl: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
    --fs-3xl: clamp(2.5rem, 1.5rem + 4.2vw, 5.25rem);
    --fs-hero: clamp(2.6rem, 1.5rem + 4.4vw, 5.5rem);
    --lh-tight: 1.02;
    --lh-snug: 1.18;
    --lh-body: 1.6;
    --track-display: -0.025em;
    --track-eyebrow: 0.14em;
    --fw-regular: 400;
    --fw-medium: 520;
    --fw-semibold: 620;
    --fw-display: 380;

    /* ---------- Radius / borders ---------- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;
    --hairline: 1px;

    /* ---------- Motion ---------- */
    --dur-fast: 150ms;
    --dur-base: 220ms;
    --dur-slow: 320ms;
    --dur-reveal: 700ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --motion-distance: 18px;

    /* ---------- Z ---------- */
    --z-nav: 50;
    --z-dialog: 100;
    --z-grain: 1;

    /* ---------- Semantic: LIGHT (default, positive polarity for reading) ---------- */
    --color-bg: var(--paper-1);
    --color-bg-raised: var(--paper-0);
    --color-bg-sunken: var(--paper-2);
    --color-bg-muted: var(--paper-3);
    --color-fg: var(--bean-11);
    --color-fg-muted: var(--bean-8);
    --color-fg-subtle: var(--bean-7);
    --color-border: oklch(from var(--bean-11) l c h / 0.12);
    --color-border-strong: oklch(from var(--bean-11) l c h / 0.24);
    --color-accent: var(--copper-9);
    --color-accent-hover: var(--copper-10);
    --color-accent-fg: var(--paper-0);
    --color-accent-soft: var(--copper-3);
    --color-accent-text: var(--copper-10);
    --color-focus: var(--copper-8);
    --color-success: var(--sage-9);
    --color-success-soft: var(--sage-3);
    --color-success-text: var(--sage-11);
    --color-danger: var(--red-9);
    --color-glow: oklch(from var(--copper-6) l c h / 0.22);
    --color-nav-bg: oklch(from var(--paper-1) l c h / 0.78);
    --color-grain-opacity: 0.05;
    --color-bg-crema: var(--latte-2);
    --color-rail: oklch(from var(--bean-11) l c h / 0.09);

    /* Inverted "espresso" band tokens (used by .band-dark in both themes) */
    --band-bg: var(--bean-11);
    --band-bg-raised: var(--bean-10);
    --band-fg: var(--paper-1);
    --band-fg-muted: oklch(from var(--paper-2) l c h / 0.72);
    --band-border: oklch(from var(--paper-1) l c h / 0.14);
    --band-accent: var(--copper-6);

    --shadow-canvas: 0 1px 0 oklch(from var(--paper-0) l c h / 0.6) inset,
      0 30px 60px -20px oklch(from var(--bean-12) l c h / 0.28),
      0 12px 24px -12px oklch(from var(--bean-12) l c h / 0.18);
    --shadow-pop: 0 18px 40px -16px oklch(from var(--bean-12) l c h / 0.35);
  }

  /* ---------- Semantic: DARK (opt-in only via the toggle; light-first per uiuxaudit Part 2 #3) ---------- */
  :root[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: var(--bean-12);
    --color-bg-raised: var(--bean-11);
    --color-bg-sunken: oklch(13.5% 0.012 46);
    --color-bg-muted: var(--bean-10);
    --color-fg: var(--paper-1);
    --color-fg-muted: oklch(from var(--paper-3) l c h / 0.8);
    --color-fg-subtle: oklch(from var(--paper-4) l c h / 0.72);
    --color-border: oklch(from var(--paper-1) l c h / 0.12);
    --color-border-strong: oklch(from var(--paper-1) l c h / 0.24);
    --color-accent: var(--copper-6);
    --color-accent-hover: var(--copper-5);
    --color-accent-fg: var(--bean-12);
    --color-accent-soft: oklch(from var(--copper-8) l c h / 0.22);
    --color-accent-text: var(--copper-5);
    --color-focus: var(--copper-5);
    --color-success-soft: oklch(from var(--sage-9) l c h / 0.2);
    --color-success-text: oklch(80% 0.08 155);
    --color-glow: oklch(from var(--copper-8) l c h / 0.28);
    --color-nav-bg: oklch(from var(--bean-12) l c h / 0.72);
    --color-grain-opacity: 0.07;
    --color-bg-crema: var(--bean-10);
    --color-rail: oklch(from var(--paper-1) l c h / 0.08);
    --band-bg: oklch(12.5% 0.012 46);
    --band-bg-raised: var(--bean-11);
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-fast: 1ms;
      --dur-base: 1ms;
      --dur-slow: 1ms;
      --dur-reveal: 1ms;
      --motion-distance: 0px;
    }
  }
  @media (prefers-contrast: more) {
    :root {
      --color-fg-muted: var(--color-fg);
      --color-fg-subtle: var(--color-fg);
      --color-border: var(--color-border-strong);
      --color-grain-opacity: 0;
    }
  }
}