/* ==========================================================================
   Smith O'Mahony Eyecare — Design tokens
   Direction: light-luxury optical editorial. Warm bone paper, ink text,
   brass accent, hairline rules, high-contrast serif display.
   ========================================================================== */

:root {
  /* --- Colour ------------------------------------------------------------ */
  --color-bone: oklch(97.6% 0.008 85);
  --color-bone-deep: oklch(94.5% 0.012 82);
  --color-paper: oklch(99.2% 0.004 85);

  --color-ink: oklch(21% 0.018 258);
  --color-ink-soft: oklch(38% 0.014 258);
  --color-ink-mute: oklch(54% 0.012 258);

  --color-night: oklch(17.5% 0.016 258);
  --color-night-raised: oklch(22.5% 0.018 258);
  --color-night-text: oklch(93% 0.008 85);
  --color-night-mute: oklch(72% 0.012 258);

  /* Sampled from the official logotype (#c08838). */
  --color-brass: oklch(66.7% 0.116 73);
  --color-brass-deep: oklch(54% 0.106 70);
  --color-brass-glow: oklch(82% 0.092 80);

  --color-lens: oklch(72% 0.086 224);

  --color-line: oklch(21% 0.018 258 / 0.14);
  --color-line-soft: oklch(21% 0.018 258 / 0.07);
  --color-line-night: oklch(93% 0.008 85 / 0.16);

  --color-surface: var(--color-bone);
  --color-text: var(--color-ink);
  --color-accent: var(--color-brass-deep);

  --focus-ring: oklch(56% 0.098 72);

  /* --- Type -------------------------------------------------------------- */
  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype",
    Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --text-micro: 0.6875rem;
  --text-eyebrow: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: clamp(1rem, 0.955rem + 0.22vw, 1.125rem);
  --text-lead: clamp(1.125rem, 1.04rem + 0.42vw, 1.375rem);
  --text-h4: clamp(1.125rem, 1.05rem + 0.36vw, 1.375rem);
  --text-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);
  --text-h2: clamp(2rem, 1.5rem + 2.3vw, 3.75rem);
  --text-h1: clamp(2.75rem, 1.6rem + 4.6vw, 6rem);
  --text-display: clamp(3rem, 1.7rem + 5vw, 6.25rem);
  --text-numeral: clamp(2.5rem, 1.7rem + 3.2vw, 4.5rem);

  --leading-tight: 1.02;
  --leading-snug: 1.16;
  --leading-body: 1.62;
  --tracking-display: -0.022em;
  --tracking-eyebrow: 0.2em;

  /* --- Space ------------------------------------------------------------- */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-section: clamp(4.5rem, 3rem + 6vw, 9.5rem);
  --space-section-tight: clamp(3rem, 2.2rem + 3.4vw, 5.5rem);

  --gutter: clamp(1.25rem, 0.7rem + 2.6vw, 3.5rem);
  --measure: 68ch;
  --measure-narrow: 54ch;
  --shell: 82.5rem;
  --shell-narrow: 60rem;

  /* --- Shape ------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-raise: 0 1px 2px oklch(21% 0.018 258 / 0.05),
    0 12px 28px -18px oklch(21% 0.018 258 / 0.35);
  --shadow-lift: 0 2px 4px oklch(21% 0.018 258 / 0.06),
    0 28px 60px -28px oklch(21% 0.018 258 / 0.42);

  /* --- Motion ------------------------------------------------------------ */
  --duration-fast: 160ms;
  --duration-normal: 320ms;
  --duration-slow: 620ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Layering ---------------------------------------------------------- */
  --z-grain: 1;
  --z-header: 60;
  --z-drawer: 70;
  --z-skip: 90;
}

/* Sections that invert to the night palette re-map the semantic tokens so
   every component inside them keeps working without variant classes. */
.on-night {
  --color-surface: var(--color-night);
  --color-text: var(--color-night-text);
  --color-ink: var(--color-night-text);
  --color-ink-soft: oklch(83% 0.01 85);
  --color-ink-mute: var(--color-night-mute);
  --color-line: var(--color-line-night);
  --color-line-soft: oklch(93% 0.008 85 / 0.08);
  --color-accent: var(--color-brass-glow);
  --focus-ring: var(--color-brass-glow);
  background-color: var(--color-night);
  color: var(--color-night-text);
}