/* ==========================================================================
   Yugal Kishor Juu: design tokens
   Every colour, size, space, radius, shadow and motion value lives here.
   Contrast ratios (WCAG) are noted next to text colours. See /design-system.
   Palette (owner decision 2026-11-07): bhagwa (saffron) as the accent, a deep
   saffron-brown ("maroon") as the dark, warm cream as the page.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- Colour: core palette ---------- */
  --maroon: #4A1C0C;         /* deep bhagwa: headings, primary buttons, dark bands, footer. 13.3:1 on cream */
  --maroon-hover: #5E2611;   /* hover on maroon fills. Cream on it 11.1:1 */
  --maroon-deep: #2E1007;    /* lightbox backdrop, footer base strip */
  --saffron: #EE7F24;        /* bhagwa: top bar, fills, rules, glyphs. NOT for text on cream (2.5:1). Maroon text on it 5.26:1 */
  --saffron-hover: #E8731C;  /* hover on saffron fills. Maroon text on it 4.72:1 */
  --saffron-ink: #A8470A;    /* saffron text on cream (labels, links). 5.46:1 on cream, 4.95:1 on cream-deep */
  --saffron-soft: #F9DCC3;   /* hairline frames, tints */
  --cream: #FAF6EE;          /* page background */
  --cream-deep: #F5EADB;     /* alternate bands, surfaces */
  --paper: #FFFDF8;          /* raised surfaces */
  --ink: #2E2520;            /* body text (warm). 13.9:1 on cream */
  --muted: #6B5A50;          /* meta, captions. 6.1:1 on cream, 5.5:1 on cream-deep */
  --hairline: #E8D9C8;       /* decorative rules */
  --hairline-strong: #D9C4AD;
  --on-maroon: #FAF6EE;      /* 13.3:1 on maroon */
  --on-maroon-muted: #E3C7B2;/* 8.9:1 on maroon */
  --saffron-on-maroon: #F6A04C; /* labels on maroon. 6.9:1 */
  --hairline-on-maroon: rgb(250 246 238 / 0.14);

  /* Scrims and overlays (maroon-deep based) */
  --scrim-hero: linear-gradient(20deg, rgb(46 16 7 / 0.84) 0%, rgb(74 28 12 / 0.55) 38%, rgb(74 28 12 / 0.08) 72%, rgb(74 28 12 / 0) 100%);
  --scrim-top: linear-gradient(180deg, rgb(46 16 7 / 0.55) 0%, rgb(46 16 7 / 0) 100%);
  --backdrop: rgb(46 16 7 / 0.975);

  /* ---------- Typography ---------- */
  --font-serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fluid type scale (min at 360px, max at ~1440px). Cormorant never below 20px. */
  --text-label: clamp(0.72rem, 0.68rem + 0.15vw, 0.8rem);   /* eyebrow, Inter 600 caps */
  --text-small: 0.875rem;                                    /* meta */
  --text-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --text-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --text-h4: clamp(1.25rem, 1.18rem + 0.3vw, 1.4rem);        /* serif, small titles */
  --text-h3: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  --text-h3-lg: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);      /* feature card titles */
  --text-h2: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --text-quote: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --text-date: clamp(2.5rem, 2rem + 1.6vw, 3.5rem);
  --text-h1: clamp(2.6rem, 1.6rem + 4.6vw, 5.5rem);
  --text-display: clamp(3.1rem, 1.4rem + 7vw, 7.5rem);       /* hero title */

  --leading-tight: 1.02;
  --leading-heading: 1.1;
  --leading-snug: 1.25;
  --leading-body: 1.7;
  --leading-meta: 1.5;

  --tracking-label: 0.16em;
  --tracking-tight: -0.01em;
  --tracking-meta: 0.01em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8.5rem;   /* 136 */

  --section-pad: clamp(4rem, 3rem + 5vw, 8.5rem);
  --section-gap: clamp(2.5rem, 2rem + 2vw, 4rem);   /* header to content */
  --gutter: clamp(1.25rem, 0.6rem + 2.8vw, 3rem);   /* 20px to 48px */

  /* ---------- Layout ---------- */
  --container: 75rem;        /* 1200px content */
  --container-wide: 90rem;   /* 1440px imagery */
  --measure: 68ch;           /* reading width */
  --topbar-h: 2.5rem;        /* saffron strip above the navbar (scrolls away) */
  --header-h: 4.5rem;        /* sticky navbar */
  /* Inline primary nav from 1100px; below that the Menu button opens the drawer (chrome.css). */

  /* ---------- Radii ---------- */
  --radius-1: 2px;           /* images, cards: essentially square */
  --radius-pill: 999px;      /* buttons */
  --radius-round: 50%;

  /* ---------- Shadows (used sparingly: covers, stuck navbar, floating button) ---------- */
  --shadow-cover: 0 18px 40px -18px rgb(74 28 12 / 0.35);
  --shadow-cover-hover: 0 28px 50px -22px rgb(74 28 12 / 0.45);
  --shadow-float: 0 12px 30px -10px rgb(74 28 12 / 0.45);
  --shadow-bar: 0 10px 28px -18px rgb(74 28 12 / 0.4);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-hover: 150ms;
  --dur-ui: 300ms;
  --dur-reveal: 700ms;
  --dur-hero-fade: 1200ms;
  --dur-hero-slide: 7700ms;  /* 6.5s interval + 1.2s fade: one slow zoom per slide */
  --stagger: 80ms;
  --stagger-menu: 40ms;
  --reveal-distance: 16px;
  --hover-zoom: 1.03;

  /* ---------- Layers ---------- */
  --z-header: 50;
  --z-float: 60;
  --z-menu: 100;
  --z-lightbox: 110;
  --z-skip: 200;
}

/* Reduced motion: zero every duration; components also drop transforms. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-hover: 0ms;
    --dur-ui: 0ms;
    --dur-reveal: 0ms;
    --dur-hero-fade: 0ms;
    --dur-hero-slide: 0ms;
    --stagger: 0ms;
    --stagger-menu: 0ms;
    --reveal-distance: 0px;
    --hover-zoom: 1;
  }
}