/* Hallmark · genre: atmospheric · macrostructure: Marquee Hero (landing) · Workbench (app pages)
 * theme: custom "Cognac Dark" · nav: N5 · footer: Ft5 · design-system: design.md · designed-as-app
 * paper-band: dark (L 8–17%) · display-style: classical-serif (Cormorant) · accent-hue: warm (60°)
 * vibe: "warm cognac intimate book-lover"
 * pre-emit critique: P4 H4 E4 S5 R5 V4
 */

:root {
  /* ── Colour ─────────────────────────────────────────────────────────── */
  --color-paper:         oklch(8%  0.014 55);   /* cognac-black canvas */
  --color-paper-2:       oklch(12% 0.015 52);   /* charcoal */
  --color-surface:       oklch(17% 0.016 50);   /* card surface */
  --color-surface-hover: oklch(20% 0.017 50);   /* card on hover */
  --color-rule:          oklch(24% 0.010 52);   /* subtle divider */
  --color-muted:         oklch(44% 0.008 55);   /* dim text */
  --color-ink-2:         oklch(68% 0.008 60);   /* secondary text */
  --color-ink:           oklch(97% 0.006 80);   /* warm white */
  --color-accent:        oklch(72% 0.095 60);   /* soft copper */
  --color-accent-hover:  oklch(78% 0.095 60);   /* accent on hover */
  --color-accent-ink:    oklch(12% 0.010 55);   /* text on accent bg */
  --color-focus:         oklch(75% 0.12  60);   /* focus ring */

  /* alpha composites — named so all usage goes through var() */
  --color-nav-bg:        oklch(17% 0.016 50 / 0.82);
  --color-nav-border:    oklch(97% 0.006 80 / 0.07);
  --color-bloom-a:       oklch(72% 0.095 60 / 0.06);
  --color-bloom-b:       oklch(72% 0.095 60 / 0.035);
  --color-overlay:       oklch(8%  0.014 55 / 0.90);

  /* ── Typography ─────────────────────────────────────────────────────── */
  --font-display: "Cormorant Garamond", ui-serif, Georgia, serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, sans-serif;

  /* type scale */
  --text-xs:      0.75rem;    /* 12px */
  --text-sm:      0.875rem;   /* 14px */
  --text-base:    1rem;       /* 16px */
  --text-md:      1.125rem;   /* 18px */
  --text-lg:      1.375rem;   /* 22px */
  --text-xl:      1.75rem;    /* 28px */
  --text-2xl:     2.25rem;    /* 36px */
  --text-display: clamp(3rem, 6vw + 1rem, 6rem);
  --text-marquee: clamp(2.75rem, 8vw + 0.5rem, 7rem);

  /* tracking */
  --tracking-display: -0.02em;
  --tracking-body:    0;

  /* ── Spacing — 4-point named scale ──────────────────────────────────── */
  --space-3xs: 0.125rem;   /*   2px */
  --space-2xs: 0.25rem;    /*   4px */
  --space-xs:  0.5rem;     /*   8px */
  --space-sm:  0.75rem;    /*  12px */
  --space-md:  1rem;       /*  16px */
  --space-lg:  1.5rem;     /*  24px */
  --space-xl:  2.5rem;     /*  40px */
  --space-2xl: 4rem;       /*  64px */
  --space-3xl: 6rem;       /*  96px */
  --space-4xl: 9rem;       /* 144px */

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* ── Border radius ───────────────────────────────────────────────────── */
  --radius-sm:   0.25rem;   /*  4px */
  --radius-md:   0.5rem;    /*  8px */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-pill: 9999px;
  --radius-card: 0.625rem;  /* 10px */

  /* ── Z-index scale ───────────────────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:  10;
  --z-overlay: 20;
  --z-modal:   30;
  --z-nav:     40;
  --z-toast:   50;
}

/* ── Reduced-motion overrides ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  --dur-micro: 0ms;
  --dur-short: 100ms;
  --dur-long:  150ms;
  --ease-out:  linear;
}

/* ── Base resets ─────────────────────────────────────────────────────────── */
html, body {
  overflow-x: clip;
}

body {
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* film grain overlay — every page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-below);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px;
  pointer-events: none;
}