/* ============================================================================
   Stories — design tokens
   Ported verbatim from the Stories Café design system (Claude Design project
   41ec27a5). One warm hue (~65°), chamfered corners, cream-on-near-black.
   Change a token here and the whole site restyles.
   ========================================================================== */

/* ── Type family ──────────────────────────────────────────────────────────
   Santral W01 (Taner Ardalı, 2016) — the brand's single family.
   SUPPLIED: Bold 700, which is what h1–h3 use.
   STILL NEEDED: Light 300, Regular 400, Medium 500 and Italic for body copy,
   labels and controls — until those land, non-700 weights fall through to the
   platform grotesque. Drop them in assets/fonts/ and add the matching rules. */
@font-face {
  font-family: "Santral W01";
  src: url("/assets/fonts/Santral-Bold.25bf1dd42e9afce0.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Base ramp — ONE warm hue (≈65°, coffee/cream). Monochromatic by rule.
     ink-5 upward are TEXT tones and every one clears WCAG AA (4.5:1) on
     --surface-page, --surface-sunken, --surface-card and --surface-raised.
     ink-0…ink-4 are surfaces and hairlines only — never set text in them. */
  --ink-0: oklch(0.115 0.008 65);
  --ink-1: oklch(0.165 0.009 65);
  --ink-2: oklch(0.215 0.010 65);
  --ink-3: oklch(0.275 0.011 65);
  --ink-4: oklch(0.360 0.012 65);
  --ink-5: oklch(0.615 0.013 66);
  --ink-6: oklch(0.690 0.014 68);
  --ink-7: oklch(0.790 0.014 70);
  --ink-8: oklch(0.890 0.013 72);
  --ink-9: oklch(0.955 0.012 75);

  /* ── Ember — the single accent. Same hue family, higher chroma. ── */
  --ember-dim: oklch(0.620 0.110 62);
  --ember: oklch(0.740 0.125 62);
  --ember-bright: oklch(0.845 0.100 68);

  /* ── Alphas — cream and shade, for veils, hairlines, glows ── */
  --cream-a04: oklch(0.955 0.012 75 / 0.04);
  --cream-a08: oklch(0.955 0.012 75 / 0.08);
  --cream-a14: oklch(0.955 0.012 75 / 0.14);
  --cream-a24: oklch(0.955 0.012 75 / 0.24);
  --cream-a60: oklch(0.955 0.012 75 / 0.60);
  --shade-a40: oklch(0.10 0.006 65 / 0.40);
  --shade-a72: oklch(0.10 0.006 65 / 0.72);
  --shade-a92: oklch(0.10 0.006 65 / 0.92);

  /* ── Semantic: surfaces ── */
  --surface-page: var(--ink-0);
  --surface-sunken: oklch(0.095 0.007 65);
  --surface-card: var(--ink-1);
  --surface-raised: var(--ink-2);
  --surface-inset: var(--ink-3);
  --surface-veil: var(--shade-a92);
  --surface-invert: var(--ink-9);
  --surface-nav: oklch(0.115 0.008 65 / 0.72);
  --surface-nav-panel: oklch(0.115 0.008 65 / 0.94);

  /* ── Semantic: text ── */
  --text-heading: var(--ink-9);
  --text-body: var(--ink-7);
  --text-muted: var(--ink-6);
  --text-faint: var(--ink-5);
  --text-accent: var(--ember);
  --text-on-invert: var(--ink-0);
  --text-link: var(--ember);
  --text-link-hover: var(--ember-bright);

  /* ── Semantic: lines ── */
  --line-hairline: var(--cream-a08);
  --line: var(--cream-a14);
  --line-strong: var(--cream-a24);
  --line-accent: var(--ember-dim);

  /* ── Semantic: controls ── */
  --btn-solid-bg: var(--ink-9);
  --btn-solid-fg: var(--ink-0);
  --btn-solid-bg-hover: oklch(1 0 0);
  --btn-outline-fg: var(--ink-8);
  --btn-ghost-fg: var(--ink-7);
  --focus-ring: var(--ember);

  /* ── Semantic: state signals (kept in-hue; tones, not colours) ── */
  --state-open: var(--ink-9);
  --state-closed: var(--ink-5);
  --state-attention: var(--ember);
  /* The ONLY sanctioned hue departure in the system — errors only. */
  --state-error: oklch(0.640 0.140 33);

  /* ── Typography ── */
  --font-core: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Santral W01", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 800;

  --fs-h1: clamp(2.75rem, 6.2vw, 5.5rem);
  --fs-h2: clamp(2rem, 3.6vw, 3.25rem);
  --fs-h3: clamp(1.375rem, 1.9vw, 1.75rem);
  --fs-h4: 1.125rem;
  --fs-lead: clamp(1.0625rem, 1.35vw, 1.3125rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8125rem;
  --fs-micro: 0.6875rem;

  --lh-tight: 0.98;
  --lh-heading: 1.06;
  --lh-snug: 1.25;
  --lh-body: 1.6;
  --lh-loose: 1.75;

  --tr-h1: -0.015em;
  --tr-h2: -0.005em;
  --tr-h3: 0.02em;
  --tr-body: 0;
  --tr-label: 0.14em;
  --tr-eyebrow: 0.22em;

  /* Headings 1–3 are ALWAYS uppercase in this brand. */
  --case-heading: uppercase;
  --case-label: uppercase;

  /* ── Spacing ── */
  --sp-0: 0;
  --sp-1: 0.125rem;
  --sp-2: 0.25rem;
  --sp-3: 0.5rem;
  --sp-4: 0.75rem;
  --sp-5: 1rem;
  --sp-6: 1.25rem;
  --sp-7: 1.5rem;
  --sp-8: 2rem;
  --sp-9: 2.5rem;
  --sp-10: 3rem;
  --sp-11: 4rem;
  --sp-12: 5rem;
  --sp-13: 6rem;
  --sp-14: 8rem;
  --sp-15: 10rem;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4rem, 9vw, 10rem);
  --stack-tight: var(--sp-3);
  --stack: var(--sp-5);
  --stack-loose: var(--sp-8);

  --max-page: 82.5rem;
  --max-prose: 62ch;
  --max-narrow: 52.5rem;

  --control-h-sm: 2.125rem;
  --control-h: 2.75rem;
  --control-h-lg: 3.375rem;
  --tap-min: 2.75rem;

  /* ── Bevel — the brand's corner treatment. Chamfer, never radius. ── */
  --bevel-xs: 4px;
  --bevel-sm: 6px;
  --bevel-md: 10px;
  --bevel-lg: 16px;
  --bevel-chip: var(--bevel-xs);
  --bevel-btn: var(--bevel-sm);
  --bevel-card: var(--bevel-md);
  --bevel-panel: var(--bevel-lg);
  /* A 1px inward inset moves a 45° chamfer only 1/√2 — so the inner chamfer must
     shrink by (2 − √2) ≈ 0.586px, not 1px, or the hairline vanishes at the corners. */
  --bevel-frame-inner: calc(var(--bevel-card) - 0.5px);

  --radius-none: 0;
  --radius-pill: 999px; /* avatars & dots only */

  --border-w: 1px;
  --border-w-thick: 2px;

  /* ── Elevation — dark UI: light does the lifting, not drop shadow. ── */
  --edge-top: inset 0 1px 0 var(--cream-a08);
  --edge-all: inset 0 0 0 1px var(--cream-a08);
  --shadow-0: none;
  --shadow-1: 0 1px 2px var(--shade-a40);
  --shadow-2: 0 8px 28px -12px var(--shade-a72);
  --shadow-3: 0 24px 64px -24px var(--shade-a92);
  --glow-ember: 0 0 0 1px var(--ember-dim), 0 0 24px -6px oklch(0.74 0.125 62 / 0.35);

  --blur-veil: blur(14px);
  --blur-nav: blur(20px) saturate(115%);

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.2, 0.7, 0.25, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-entry: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-power3: cubic-bezier(0.215, 0.61, 0.355, 1);
  --dur-instant: 90ms;
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 420ms;
  --dur-reveal: 700ms;
  --t-control: color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
    --dur-reveal: 1ms;
  }
}