/* Hallmark · tokens · route: custom (bespoke) · idea: "Ras + Rang: every section is its own colour"
 * palette "Rang Utsav": marigold #F2B135 · kumkum #B8321F · peacock teal #0B5D5B · midnight #13183A · ivory #FAF3E6
 * display: Fraunces (roman + true italic) · body: Geist · devanagari: Tiro Devanagari Hindi
 * contrast (WCAG): ivory/midnight 15.6 · ink/marigold 9.6 · ivory/teal 7.0 · ivory/kumkum 5.4 · ink/ivory 16.4
 * Every colour, font, space, size, easing and duration on the page lives here.
 */

:root {
  /* ── Colour · the five rangs ────────────────────────── */
  --rang-marigold: oklch(81% 0.140 78);   /* #F2B135 */
  --rang-kumkum:   oklch(50% 0.170 33);   /* #B8321F */
  --rang-teal:     oklch(42% 0.070 190);  /* #0B5D5B */
  --rang-midnight: oklch(22% 0.060 275);  /* #13183A */
  --rang-ivory:    oklch(96.5% 0.018 85); /* #FAF3E6 */
  --rang-ink:      oklch(19% 0.020 50);   /* #1E1410 */

  /* supporting shades */
  --rang-marigold-deep: oklch(72% 0.150 70);
  --rang-kumkum-deep:   oklch(42% 0.150 33);
  --rang-teal-deep:     oklch(34% 0.060 190);
  --rang-midnight-2:    oklch(28% 0.065 275);
  --rang-ivory-2:       oklch(92% 0.025 85);
  --rang-rani:          oklch(58% 0.200 0);   /* tiny confetti accent only */

  /* ── Colour · flame + clay (the diya) ───────────────── */
  --color-flame:       oklch(78% 0.170 62);
  --color-flame-tip:   oklch(66% 0.190 40);
  --color-flame-core:  oklch(97% 0.050 95);
  --color-clay-light:  oklch(60% 0.110 48);
  --color-clay:        oklch(48% 0.100 42);
  --color-clay-dark:   oklch(32% 0.070 38);
  --color-oil:         oklch(26% 0.050 60);

  /* ── Colour · utility ───────────────────────────────── */
  --color-veg:      oklch(48% 0.130 145);
  --color-success:  oklch(48% 0.120 150);
  --color-wrong:    oklch(46% 0.170 28);
  --glow:           oklch(78% 0.170 62 / 0.35);
  --shade:          oklch(10% 0.030 275 / 0.35);

  /* ── Type families (2 + 1) ──────────────────────────── */
  --font-display: "Fraunces", "Georgia", serif;
  --font-body:    "Geist", "Segoe UI", system-ui, sans-serif;
  --font-deva:    "Tiro Devanagari Hindi", "Noto Serif Devanagari", serif;

  /* ── Type scale ─────────────────────────────────────── */
  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-md:   1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --text-2xl:  clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem);
  --text-3xl:  clamp(2.75rem, 1.8rem + 4.4vw, 5.5rem);
  --text-4xl:  clamp(3.25rem, 2rem + 6vw, 8rem);

  /* ── Space · 4 pt scale ─────────────────────────────── */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  --page-max:    76rem;
  --page-gutter: clamp(1.25rem, 5vw, 3.5rem);
  --section-gap: clamp(5rem, 3.5rem + 7vw, 9rem);
  --panel-radius: clamp(28px, 4vw, 56px);
  --walker-h:     clamp(112px, 11vw, 150px); /* banner parade characters */
  --skin:         oklch(68% 0.090 55);

  /* ── Chrome sizes ───────────────────────────────────── */
  --banner-h: 38px;
  --bar-h:    64px;

  /* ── Radii, rules ───────────────────────────────────── */
  --rule-hair:   1px;
  --radius-sm:   10px;
  --radius-md:   20px;
  --radius-lg:   32px;
  --radius-pill: 999px;

  /* ── 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:  140ms;
  --dur-short:  260ms;
  --dur-long:   600ms;
}

/* ── Section themes: each section sets its own rang ─────
 * --bg/--fg: the panel · --accent: highlights on the panel · --card*: surfaces inside the panel */
.theme-midnight { --bg: var(--rang-midnight); --bg-2: var(--rang-midnight-2); --fg: var(--rang-ivory); --muted: oklch(80% 0.030 270); --accent: var(--rang-marigold); --on-accent: var(--rang-ink); --line: oklch(40% 0.050 275); --card: var(--rang-midnight-2); --card-fg: var(--rang-ivory); --card-muted: oklch(80% 0.030 270); --card-accent: var(--rang-marigold); --card-line: oklch(40% 0.050 275); --word: oklch(27% 0.060 275); }
.theme-marigold { --bg: var(--rang-marigold); --bg-2: var(--rang-marigold-deep); --fg: var(--rang-ink); --muted: oklch(32% 0.050 55); --accent: var(--rang-kumkum); --on-accent: var(--rang-ivory); --line: oklch(62% 0.110 70); --card: var(--rang-ivory); --card-fg: var(--rang-ink); --card-muted: oklch(42% 0.030 55); --card-accent: var(--rang-kumkum); --card-line: oklch(86% 0.030 80); --word: oklch(77% 0.140 76); }
.theme-teal     { --bg: var(--rang-teal); --bg-2: var(--rang-teal-deep); --fg: var(--rang-ivory); --muted: oklch(85% 0.030 180); --accent: var(--rang-marigold); --on-accent: var(--rang-ink); --line: oklch(55% 0.060 190); --card: var(--rang-teal-deep); --card-fg: var(--rang-ivory); --card-muted: oklch(85% 0.030 180); --card-accent: var(--rang-marigold); --card-line: oklch(48% 0.060 190); --word: oklch(46% 0.070 190); }
.theme-kumkum   { --bg: var(--rang-kumkum); --bg-2: var(--rang-kumkum-deep); --fg: var(--rang-ivory); --muted: oklch(93% 0.030 60); --accent: var(--rang-marigold); --on-accent: var(--rang-ink); --line: oklch(62% 0.140 35); --card: var(--rang-ivory); --card-fg: var(--rang-ink); --card-muted: oklch(42% 0.030 55); --card-accent: var(--rang-kumkum); --card-line: oklch(86% 0.030 80); --word: oklch(54% 0.170 33); }
.theme-ivory    { --bg: var(--rang-ivory); --bg-2: var(--rang-ivory-2); --fg: var(--rang-ink); --muted: oklch(42% 0.030 55); --accent: var(--rang-kumkum); --on-accent: var(--rang-ivory); --line: oklch(84% 0.030 80); --card: oklch(99% 0.008 85); --card-fg: var(--rang-ink); --card-muted: oklch(42% 0.030 55); --card-accent: var(--rang-kumkum); --card-line: oklch(88% 0.030 80); --word: oklch(93% 0.022 85); }