/* ==========================================================================
   design-tokens-v2.css — Wedding Invitation, Directions 2 + 3
   Owner: Aria (Design Lead) · v3.0 · 2026-10-12
   Source of truth: docs/design/DIRECTION-3.md (FIVE designs, current)
                    docs/design/DIRECTION-2.md (three directions, accepted, retained)
                    docs/design/MOTION-SPEC.md (motion, unchanged)

   LOAD EITHER THIS FILE *OR* design-tokens.css — not both.
   No @import, no CDN. Every hex ratio is script-verified in DIRECTION-3.md §3.

   ROUND 3 (LIVE): five designs over ONE markup. Pick with:
       <html data-design="a">   USHA   — dark-luxury indigo + bronze
       <html data-design="b">   REKHA  — bold typographic
       <html data-design="c">   KOLAM  — pan-Indian geometric grid
       <html data-design="d">   UDYAN  — botanical watercolour
       <html data-design="e">   DEEPAM — minimalist editorial
   Each block sets colours + type + the structural modifier vars that
   styles.css consumes (ground, hero layout, panel, ornament, display).
   No design needs different markup — see DIRECTION-3.md §2.3.

   ROUND 2 (RETAINED, accepted; not used by the site): sections 2-4 keep the
   data-direction="neel|sindoor|rangoli" preview exactly as shipped. The live
   selector is now data-design. design-tokens.css is untouched.
   ========================================================================== */

/* ==========================================================================
   1. FONT FACES  (self-hosted woff2, OFL 1.1, in /assets/fonts/)
   Devanagari faces keep full layout features. Subset with pyftsubset
   --layout-features='*' (see DIRECTION-2.md §3.1) or conjuncts/matras break.
   ========================================================================== */

/* --- Devanagari display: Tiro Devanagari Hindi --- */
@font-face{
  font-family:"Tiro Devanagari Hindi";
  src:url("/assets/fonts/tiro-devanagari-hindi-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0900-097F,U+A8E0-A8FF,U+1CD0-1CFF,U+200C-200D,U+25CC,U+20B9;
}
@font-face{
  font-family:"Tiro Devanagari Hindi";
  src:url("/assets/fonts/tiro-devanagari-hindi-400i.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
  unicode-range:U+0900-097F,U+A8E0-A8FF,U+1CD0-1CFF,U+200C-200D,U+25CC,U+20B9;
}

/* --- Devanagari text + B display: Noto Serif Devanagari --- */
@font-face{
  font-family:"Noto Serif Devanagari";
  src:url("/assets/fonts/noto-serif-devanagari-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0900-097F,U+A8E0-A8FF,U+1CD0-1CFF,U+200C-200D,U+25CC,U+20B9;
}
@font-face{
  font-family:"Noto Serif Devanagari";
  src:url("/assets/fonts/noto-serif-devanagari-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0900-097F,U+A8E0-A8FF,U+1CD0-1CFF,U+200C-200D,U+25CC,U+20B9;
}
@font-face{
  font-family:"Noto Serif Devanagari";
  src:url("/assets/fonts/noto-serif-devanagari-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0900-097F,U+A8E0-A8FF,U+1CD0-1CFF,U+200C-200D,U+25CC,U+20B9;
}

/* --- Latin UI / body: Inter --- */
@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/inter-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/inter-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;
}

/* --- Latin display A: Fraunces --- */
@font-face{
  font-family:"Fraunces";
  src:url("/assets/fonts/fraunces-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;
}/**/
@font-face{
  font-family:"Fraunces";
  src:url("/assets/fonts/fraunces-600i.woff2") format("woff2");
  font-weight:600; font-style:italic; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;
}

/* --- Latin display B: Space Grotesk --- */
@font-face{
  font-family:"Space Grotesk";
  src:url("/assets/fonts/space-grotesk-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("/assets/fonts/space-grotesk-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;
}

/* --- Latin display C: Bricolage Grotesque --- */
@font-face{
  font-family:"Bricolage Grotesque";
  src:url("/assets/fonts/bricolage-grotesque-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;
}

/* --- Round 3 additions: Latin display C = Outfit (Design C) --- */
@font-face{
  font-family:"Outfit";
  src:url("/assets/fonts/outfit-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:"Outfit";
  src:url("/assets/fonts/outfit-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;
}

/* --- Round 3 additions: Latin display D = Lora (Design D) --- */
@font-face{
  font-family:"Lora";
  src:url("/assets/fonts/lora-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;
}

/* --- Round 3 additions: Bengali / Assamese (Assamese venue line, optional) ---
   Assamese uses the Bengali script. Only loaded when the venue element sets
   lang="as"; unicode-range keeps it off every other glyph. Drop these two
   faces if the client prints the venue in Latin only (see DIRECTION-3.md §5). */
@font-face{
  font-family:"Noto Serif Bengali";
  src:url("/assets/fonts/noto-serif-bengali-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0980-09FF,U+200C-200D,U+25CC;
}
@font-face{
  font-family:"Noto Serif Bengali";
  src:url("/assets/fonts/noto-serif-bengali-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0980-09FF,U+200C-200D,U+25CC;
}

/* Metric-matched system fallback so Devanagari before/without webfont is not jarring */
@font-face{
  font-family:"Devanagari Fallback";
  src:local("Kohinoor Devanagari"),local("Nirmala UI"),local("Noto Sans Devanagari");
  size-adjust:100%; ascent-override:88%; descent-override:24%; line-gap-override:0%;
}

/* ==========================================================================
   2. ROOT — Direction A "Neel Raat" (Indigo Night)  [DEFAULT]
   ========================================================================== */
:root{
  color-scheme:dark;

  /* --- Palette A --- */
  --c-bg:#0E1230;            --c-surface:#171C44;      --c-surface-2:#202758;
  --c-ink:#F5F1E8;           --c-ink-muted:#BBB6D9;    --c-ink-subtle:#8F8AB8;
  --c-primary:#FF5A36;       --c-primary-pressed:#E2441F; --c-on-primary:#1A0A05;
  --c-primary-tint:rgba(255,90,54,0.14);
  --c-accent:#FFC24B;        --c-accent-2:#FF8FB1;
  --c-success:#57D9A3;       --c-error:#FF8A80;         --c-warning:#FFCF6B;
  --c-success-tint:rgba(87,217,163,0.16);
  --c-error-tint:rgba(255,138,128,0.16);
  --c-warning-tint:rgba(255,207,107,0.16);
  --c-focus:#8CB8FF;         --c-border:rgba(255,255,255,0.14); --c-border-strong:#7075AD;
  --c-disabled-bg:rgba(255,255,255,0.08); --c-disabled-ink:#8F8AB8;
  --c-overlay:rgba(5,8,25,0.72);
  /* v1/LIVE tokens that site/styles.css already consumes (base fallback;
     every [data-design] block below re-declares all five). */
  --c-surface-alt:#202758;   --c-surface-sunken:#0A0D22;
  --c-footer-bg:#0A0D22;     --c-footer-ink:#F5F1E8; --c-footer-ink-muted:#BBB6D9;

  /* --- Type families ---
     Order: Devanagari webfont → Latin webfont → Latin system → Devanagari system → generic.
     Devanagari webfonts use unicode-range, so Latin always falls through to the Latin face;
     system Devanagari fonts also carry Latin glyphs, so Latin system must come first in the tail. */
  --font-dev-display:"Tiro Devanagari Hindi","Noto Serif Devanagari","Kohinoor Devanagari","Nirmala UI";
  --font-dev-text:"Noto Serif Devanagari","Kohinoor Devanagari","Nirmala UI","Noto Sans Devanagari";
  --font-latin-display:"Fraunces",Georgia,"Times New Roman";
  --font-latin-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  --font-display:"Tiro Devanagari Hindi","Fraunces","Noto Serif Devanagari",Georgia,"Kohinoor Devanagari","Nirmala UI",serif;
  --font-body:"Noto Serif Devanagari","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Kohinoor Devanagari","Nirmala UI","Noto Sans Devanagari",sans-serif;

  /* --- Type scale (Devanagari needs slightly more line-height & size than Latin) --- */
  --fs-2xs:0.75rem;  --fs-xs:0.8125rem; --fs-sm:0.875rem; --fs-base:1rem;
  --fs-md:1.125rem;  --fs-lg:1.25rem;   --fs-xl:1.5rem;   --fs-2xl:1.875rem;
  --fs-3xl:2.375rem; --fs-4xl:2.875rem;
  --fs-hero:clamp(34px,12vw,52px);   /* upper bound raised: Devanagari is denser */
  --lh-tight:1.25;   /* Devanagari: never below 1.2 or matras clip */
  --lh-snug:1.35;    --lh-normal:1.6; --lh-relaxed:1.75;
  --fw-regular:400;  --fw-medium:500; --fw-semibold:600;
  --ls-tight:0;      /* no negative tracking on Devanagari */
  --ls-normal:0;     --ls-wide:0.02em; /* Devanagari dislikes wide tracking */

  /* --- Motion (see MOTION-SPEC.md §1) --- */
  --m-dur-1:150ms; --m-dur-2:200ms; --m-dur-3:300ms; --m-dur-4:400ms;
  --m-ease-standard:cubic-bezier(0.2,0,0,1);
  --m-ease-out:cubic-bezier(0.16,1,0.3,1);
  --m-ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --m-rise:24px; --m-fade:8px; --m-stagger:80ms;
  /* COMPAT ALIASES — site/styles.css uses the v1 un-prefixed names. Without
     these, every transition/animation in styles.css silently dies. */
  --dur-1:var(--m-dur-1); --dur-2:var(--m-dur-2); --dur-3:var(--m-dur-3);
  --ease-standard:var(--m-ease-standard); --ease-out:var(--m-ease-out);

  /* --- Spacing / layout / radii / borders / shadows (unchanged from v1) --- */
  --sp-0:0; --sp-1:0.25rem; --sp-2:0.5rem; --sp-3:0.75rem; --sp-4:1rem;
  --sp-5:1.25rem; --sp-6:1.5rem; --sp-7:2rem; --sp-8:2.5rem; --sp-9:3rem;
  --sp-10:4rem; --sp-11:5rem;
  --page-max:640px; --gutter:20px; --section-gap:var(--sp-9); --content-measure:60ch;
  --r-xs:4px; --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px; --r-pill:999px; --r-circle:50%;
  --bw-1:1px; --bw-2:2px;
  --sh-xs:0 1px 2px rgba(0,0,0,0.30);
  --sh-sm:0 2px 8px rgba(0,0,0,0.35);
  --sh-md:0 8px 22px rgba(0,0,0,0.40);
  --sh-lg:0 16px 40px rgba(0,0,0,0.50);

  /* --- Touch & safe area --- */
  --tap-min:44px; --tap-comfortable:48px; --tap-play:56px;
  --safe-top:env(safe-area-inset-top,0px);   --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px); --safe-left:env(safe-area-inset-left,0px);

  /* --- Z-index --- */
  --z-base:0; --z-sticky:10; --z-overlay:50; --z-toast:80; --z-modal:100;
}

/* ==========================================================================
   3. DIRECTION B — "सिंदूर मॉडर्न / Sindoor Modern" (Vermilion Editorial)
   ========================================================================== */
:root[data-direction="sindoor"]{
  color-scheme:light;
  --c-bg:#F2F1EC;  --c-surface:#FFFFFF; --c-surface-2:#E7E6DF;
  --c-ink:#14141A; --c-ink-muted:#565663; --c-ink-subtle:#7F7F8C;
  --c-primary:#D0202A; --c-primary-pressed:#A81620; --c-on-primary:#FFFFFF;
  --c-primary-tint:#F7E3E4;
  --c-accent:#0B6B5C; --c-accent-2:#2545D3;
  --c-success:#0B6B5C; --c-error:#B3261E; --c-warning:#8A5A00;
  --c-success-tint:#E1EFEB; --c-error-tint:#F4E1DF; --c-warning-tint:#F3EAD6;
  --c-focus:#2545D3; --c-border:#D9D8D0; --c-border-strong:#83838B;
  --c-disabled-bg:#E7E6DF; --c-disabled-ink:#7F7F8C;
  --c-overlay:rgba(20,20,26,0.55);

  --font-dev-display:"Noto Serif Devanagari","Kohinoor Devanagari","Nirmala UI";
  --font-dev-text:"Noto Serif Devanagari","Kohinoor Devanagari","Nirmala UI";
  --font-latin-display:"Space Grotesk","Inter",system-ui;
  --font-latin-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
  --font-display:"Noto Serif Devanagari","Space Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Kohinoor Devanagari","Nirmala UI",serif;
  --font-body:"Noto Serif Devanagari","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Kohinoor Devanagari","Nirmala UI",sans-serif;

  --lh-tight:1.22; --lh-snug:1.32; --lh-normal:1.55; --lh-relaxed:1.7;
  --ls-tight:-0.01em; --ls-wide:0.04em;
  --sh-xs:0 1px 2px rgba(20,20,26,0.06);
  --sh-sm:0 2px 6px rgba(20,20,26,0.08);
  --sh-md:0 6px 18px rgba(20,20,26,0.10);
  --sh-lg:0 14px 34px rgba(20,20,26,0.14);
}

/* ==========================================================================
   4. DIRECTION C — "रंगोली पॉप / Rangoli Pop"
   ========================================================================== */
:root[data-direction="rangoli"]{
  color-scheme:light;
  --c-bg:#FFF3F8;  --c-surface:#FFFFFF; --c-surface-2:#F3E9FF;
  --c-ink:#2A0B3B; --c-ink-muted:#6B5A82; --c-ink-subtle:#8B7EA6;
  --c-primary:#C2187A; --c-primary-pressed:#A10F63; --c-on-primary:#FFFFFF;
  --c-primary-tint:#FBE0EE;
  --c-accent:#00805C; --c-accent-2:#6D28D9;
  --c-success:#00805C; --c-error:#C71E36; --c-warning:#9A5C00;
  --c-success-tint:#DCF1E8; --c-error-tint:#F7DFE3; --c-warning-tint:#F6E8D2;
  --c-focus:#6D28D9; --c-border:#EADCF5; --c-border-strong:#8E7BA6;
  --c-disabled-bg:#EFE6F5; --c-disabled-ink:#8B7EA6;
  --c-overlay:rgba(42,11,59,0.55);

  --font-dev-display:"Tiro Devanagari Hindi","Noto Serif Devanagari","Kohinoor Devanagari","Nirmala UI";
  --font-dev-text:"Noto Serif Devanagari","Kohinoor Devanagari","Nirmala UI";
  --font-latin-display:"Bricolage Grotesque","Inter",system-ui;
  --font-latin-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
  --font-display:"Tiro Devanagari Hindi","Bricolage Grotesque","Noto Serif Devanagari",Georgia,"Kohinoor Devanagari","Nirmala UI",serif;
  --font-body:"Noto Serif Devanagari","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Kohinoor Devanagari","Nirmala UI","Noto Sans Devanagari",sans-serif;

  --lh-tight:1.22; --lh-snug:1.32; --lh-normal:1.55; --lh-relaxed:1.7;
  --ls-tight:-0.005em; --ls-wide:0.02em;
  --sh-xs:0 1px 2px rgba(42,11,59,0.07);
  --sh-sm:0 2px 6px rgba(42,11,59,0.09);
  --sh-md:0 6px 18px rgba(42,11,59,0.12);
  --sh-lg:0 14px 34px rgba(42,11,59,0.16);
}

/* ==========================================================================
   4b. ROUND 3 — FIVE DESIGNS  [LIVE]
   Same markup; swap <html data-design="a|b|c|d|e">.
   Each block overrides ALL colour tokens (so nothing leaks from :root) and
   sets the structural modifier vars that styles.css reads:
     --shell-ground  : none | plain | grain | kolam | wash
     --hero-layout   : stack-center | editorial-left | panel | garden-center | minimal-top
     --panel         : none | hairline | double | soft | underline
     --ornament      : none | rule | kolam-dots | leaf-vine | lamp-flame
     --display-*     : weight / tracking / clamp size for the couple names
   Every text/bg pair is script-verified in DIRECTION-3.md §3. Do not darken
   or lighten these hexes without re-running that script.
   ========================================================================== */

/* --- DESIGN A — "USHA / उषा" (Dawn) — dark-luxury indigo + bronze ---------- */
:root[data-design="a"]{
  color-scheme:dark;
  --c-bg:#3E0F14;            --c-surface:#561A20;      --c-surface-2:#6B2229;
  --c-ink:#FBF3E6;           --c-ink-muted:#DCC3A6;    --c-ink-subtle:#B99B7C;
  --c-primary:#E3B45C;       --c-primary-pressed:#C69440; --c-on-primary:#3A1405;
  --c-primary-tint:rgba(227,180,92,0.18);
  --c-accent:#F0D08A;        --c-accent-2:#E08C7A;
  --c-success:#C9973F;       --c-error:#FF9A93;         --c-warning:#F2C46B;
  --c-success-tint:rgba(195,151,63,0.16);
  --c-error-tint:rgba(255,154,147,0.16);
  --c-warning-tint:rgba(242,196,107,0.16);
  --c-focus:#E3B45C;         --c-border:rgba(255,255,255,0.14); --c-border-strong:#8A5A4E;
  --c-disabled-bg:rgba(255,255,255,0.08); --c-disabled-ink:#B99B7C;
  --c-overlay:rgba(40,10,13,0.74);
  --c-surface-alt:#4A161C;   --c-surface-sunken:#2E0A0E;
  --c-footer-bg:#2E0A0E;     --c-footer-ink:#FBF3E6; --c-footer-ink-muted:#DCC3A6;
  --font-dev-display:"Tiro Devanagari Hindi","Noto Serif Devanagari","Kohinoor Devanagari","Nirmala UI";
  --font-dev-text:"Tiro Devanagari Hindi","Noto Serif Devanagari","Kohinoor Devanagari","Nirmala UI";
  --font-latin-display:"Fraunces",Georgia,"Times New Roman";
  --font-latin-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  --font-display:"Tiro Devanagari Hindi","Fraunces","Noto Serif Devanagari","Noto Serif Bengali",Georgia,"Kohinoor Devanagari","Nirmala UI",serif;
  --font-body:"Tiro Devanagari Hindi","Inter","Noto Serif Bengali",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Kohinoor Devanagari","Nirmala UI",sans-serif;
  --shell-ground:none; --hero-layout:stack-center; --panel:hairline; --ornament:rule;
  --display-weight:400; --display-track:0; --display-size:clamp(36px,13vw,58px);
  --radius-panel:var(--r-md);
  --lh-tight:1.25; --lh-snug:1.35; --lh-normal:1.6; --lh-relaxed:1.75;
  --ls-tight:0; --ls-wide:0.02em;
  --sh-xs:0 1px 2px rgba(0,0,0,0.30); --sh-sm:0 2px 8px rgba(0,0,0,0.35);
  --sh-md:0 8px 22px rgba(0,0,0,0.40); --sh-lg:0 16px 40px rgba(0,0,0,0.50);
}

/* --- DESIGN B — "REKHA / रेखा" (Line) — bold typographic ------------------- */
:root[data-design="b"]{
  color-scheme:light;
  --c-bg:#F5F3EE;            --c-surface:#FFFFFF;      --c-surface-2:#E9E6DE;
  --c-ink:#141414;           --c-ink-muted:#55524B;    --c-ink-subtle:#807C74;
  --c-primary:#B3261E;       --c-primary-pressed:#8E1C16; --c-on-primary:#FFFFFF;
  --c-primary-tint:rgba(179,38,30,0.12);
  --c-accent:#1F4B43;        --c-accent-2:#6E4A33;
  --c-success:#8A6A1F;       --c-error:#B3261E;         --c-warning:#8A5A00;
  --c-success-tint:rgba(138,106,31,0.14);
  --c-error-tint:rgba(179,38,30,0.10);
  --c-warning-tint:rgba(138,90,0,0.12);
  --c-focus:#B3261E;         --c-border:#DAD6CC;        --c-border-strong:#8A867C;
  --c-disabled-bg:#E9E6DE;   --c-disabled-ink:#807C74;
  --c-overlay:rgba(20,20,20,0.55);
  --c-surface-alt:#EFEDE6;   --c-surface-sunken:#EAE7DE;
  --c-footer-bg:#2B1512;     --c-footer-ink:#F5F3EE; --c-footer-ink-muted:#C9C6BE;

  --font-dev-display:"Noto Serif Devanagari","Kohinoor Devanagari","Nirmala UI";
  --font-dev-text:"Noto Serif Devanagari","Kohinoor Devanagari","Nirmala UI";
  --font-latin-display:"Space Grotesk","Inter",system-ui;
  --font-latin-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
  --font-display:"Noto Serif Devanagari","Space Grotesk","Inter","Noto Serif Bengali",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Kohinoor Devanagari","Nirmala UI",serif;
  --font-body:"Noto Serif Devanagari","Inter","Noto Serif Bengali",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Kohinoor Devanagari","Nirmala UI",sans-serif;

  --shell-ground:plain; --hero-layout:editorial-left; --panel:underline; --ornament:rule;
  --display-weight:700; --display-track:-0.01em; --display-size:clamp(40px,15vw,72px);
  --radius-panel:0px;
  --lh-tight:1.22; --lh-snug:1.32; --lh-normal:1.55; --lh-relaxed:1.7;
  --ls-tight:-0.01em; --ls-wide:0.04em;
  --sh-xs:0 1px 2px rgba(20,20,20,0.06); --sh-sm:0 2px 6px rgba(20,20,20,0.08);
  --sh-md:0 6px 18px rgba(20,20,20,0.10); --sh-lg:0 14px 34px rgba(20,20,20,0.14);
}

/* --- DESIGN C — "KOLAM / कोलम" — pan-Indian geometric grid ---------------- */
:root[data-design="c"]{
  color-scheme:dark;
  --c-bg:#5E1736;            --c-surface:#7A2048;      --c-surface-2:#93285A;
  --c-surface-alt:#6E1C3E;   --c-surface-sunken:#460F27;
  --c-ink:#FDF3EC;           --c-ink-muted:#E7C3C6;    --c-ink-subtle:#C79FA8;
  --c-primary:#F0C97A;       --c-primary-pressed:#D6AC5E; --c-on-primary:#3A0C1C;
  --c-primary-tint:rgba(240,201,122,0.18);
  --c-accent:#F6DCA4;        --c-accent-2:#E9A0A8;
  --c-success:#D2A24A;       --c-error:#FFA28F;         --c-warning:#F0C36B;
  --c-success-tint:rgba(210,162,74,0.12);
  --c-error-tint:rgba(255,162,143,0.08);
  --c-warning-tint:rgba(240,195,107,0.08);
  --c-focus:#F0C97A;         --c-border:rgba(255,255,255,0.16); --c-border-strong:#9A4A66;
  --c-disabled-bg:rgba(255,255,255,0.08); --c-disabled-ink:#C79FA8;
  --c-overlay:rgba(58,12,28,0.74);
  --c-footer-bg:#460F27;     --c-footer-ink:#FDF3EC; --c-footer-ink-muted:#E7C3C6;
  --font-dev-display:"Tiro Devanagari Hindi","Noto Serif Devanagari","Kohinoor Devanagari","Nirmala UI";
  --font-dev-text:"Tiro Devanagari Hindi","Noto Serif Devanagari","Kohinoor Devanagari","Nirmala UI";
  --font-latin-display:"Outfit","Inter",system-ui;
  --font-latin-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
  --font-display:"Tiro Devanagari Hindi","Outfit","Noto Serif Devanagari","Noto Serif Bengali",Georgia,"Kohinoor Devanagari","Nirmala UI",serif;
  --font-body:"Tiro Devanagari Hindi","Inter","Noto Serif Bengali",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Kohinoor Devanagari","Nirmala UI",sans-serif;
  --shell-ground:kolam; --hero-layout:panel; --panel:double; --ornament:kolam-dots;
  --display-weight:700; --display-track:0; --display-size:clamp(34px,12vw,54px);
  --radius-panel:var(--r-sm);
  --lh-tight:1.24; --lh-snug:1.34; --lh-normal:1.58; --lh-relaxed:1.72;
  --ls-tight:0; --ls-wide:0.02em;
  --sh-xs:0 1px 2px rgba(0,0,0,0.24); --sh-sm:0 3px 10px rgba(0,0,0,0.28);
  --sh-md:0 8px 22px rgba(0,0,0,0.34); --sh-lg:0 16px 40px rgba(0,0,0,0.42);
}

/* --- DESIGN D — "UDYAN / उद्यान" (Garden) — botanical watercolour ----------- */
:root[data-design="d"]{
  color-scheme:light;
  --c-bg:#F7F1E3;            --c-surface:#FFFBF2;      --c-surface-2:#EFE4CE;
  --c-ink:#3A1A12;           --c-ink-muted:#6E5445;    --c-ink-subtle:#8C7361;
  --c-primary:#8C2B22;       --c-primary-pressed:#6F2019; --c-on-primary:#FFF8EC;
  --c-primary-tint:rgba(140,43,34,0.10);
  --c-accent:#B8873C;        --c-accent-2:#A4523A;
  --c-success:#8C6A20;       --c-error:#A6352F;         --c-warning:#8A5A00;
  --c-success-tint:rgba(47,107,74,0.12);
  --c-error-tint:rgba(166,53,47,0.10);
  --c-warning-tint:rgba(138,90,0,0.12);
  --c-focus:#8C2B22;         --c-border:#DDD6C4;        --c-border-strong:#C0A882;
  --c-disabled-bg:#ECE7DA;   --c-disabled-ink:#8C7361;
  --c-overlay:rgba(58,26,18,0.70);
  --c-surface-alt:#F2E9D6;   --c-surface-sunken:#E7DCC2;
  --c-footer-bg:#4A1E17;     --c-footer-ink:#FBF3E6; --c-footer-ink-muted:#DCC3A6;
  --font-dev-display:"Noto Serif Devanagari","Kohinoor Devanagari","Nirmala UI";
  --font-dev-text:"Noto Serif Devanagari","Kohinoor Devanagari","Nirmala UI";
  --font-latin-display:"Lora","Fraunces",Georgia,serif;
  --font-latin-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
  --font-display:"Noto Serif Devanagari","Lora","Noto Serif Bengali",Georgia,"Kohinoor Devanagari","Nirmala UI",serif;
  --font-body:"Noto Serif Devanagari","Inter","Noto Serif Bengali",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Kohinoor Devanagari","Nirmala UI",sans-serif;
  --shell-ground:wash; --hero-layout:garden-center; --panel:soft; --ornament:leaf-vine;
  --display-weight:500; --display-track:0.005em; --display-size:clamp(34px,12vw,56px);
  --radius-panel:var(--r-lg);
  --lh-tight:1.28; --lh-snug:1.38; --lh-normal:1.62; --lh-relaxed:1.78;
  --ls-tight:0; --ls-wide:0.02em;
  --sh-xs:0 1px 2px rgba(43,52,40,0.06); --sh-sm:0 2px 8px rgba(43,52,40,0.08);
  --sh-md:0 8px 20px rgba(43,52,40,0.10); --sh-lg:0 16px 36px rgba(43,52,40,0.14);
}

/* --- DESIGN E — "DEEPAM / दीपम्" (Lamp) — minimalist editorial -------------- */
:root[data-design="e"]{
  color-scheme:light;
  --c-bg:#FBFAF7;            --c-surface:#FFFFFF;      --c-surface-2:#F0EEE8;
  --c-surface-alt:#F4F2EC;   --c-surface-sunken:#ECEAE3;
  --c-ink:#17181A;           --c-ink-muted:#5A5B60;    --c-ink-subtle:#7E7F84;
  --c-primary:#A84A08;       --c-primary-pressed:#8E3F06; --c-on-primary:#FFFFFF;
  --c-primary-tint:rgba(168,74,8,0.10);
  --c-accent:#9A3412;        --c-accent-2:#7A4326;
  --c-success:#8A6A1F;       --c-error:#B91C1C;         --c-warning:#92400E;
  --c-success-tint:rgba(138,106,31,0.14);
  --c-error-tint:rgba(185,28,28,0.10);
  --c-warning-tint:rgba(146,64,14,0.10);
  --c-focus:#A84A08;         --c-border:#E4E1D9;        --c-border-strong:#85847C;
  --c-disabled-bg:#F0EEE8;   --c-disabled-ink:#8A8B90;
  --c-overlay:rgba(23,24,26,0.55);
  --c-footer-bg:#2A1207;     --c-footer-ink:#FBFAF7; --c-footer-ink-muted:#CFCEC9;

  --font-dev-display:"Noto Serif Devanagari","Kohinoor Devanagari","Nirmala UI";
  --font-dev-text:"Noto Serif Devanagari","Kohinoor Devanagari","Nirmala UI";
  --font-latin-display:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
  --font-latin-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
  --font-display:"Noto Serif Devanagari","Inter","Noto Serif Bengali",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Kohinoor Devanagari","Nirmala UI",sans-serif;
  --font-body:"Noto Serif Devanagari","Inter","Noto Serif Bengali",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Kohinoor Devanagari","Nirmala UI",sans-serif;

  --shell-ground:plain; --hero-layout:minimal-top; --panel:none; --ornament:lamp-flame;
  --display-weight:600; --display-track:-0.005em; --display-size:clamp(30px,10vw,46px);
  --radius-panel:var(--r-xs);
  --lh-tight:1.26; --lh-snug:1.36; --lh-normal:1.6; --lh-relaxed:1.75;
  --ls-tight:-0.005em; --ls-wide:0.02em;
  --sh-xs:0 1px 2px rgba(23,24,26,0.05); --sh-sm:0 2px 6px rgba(23,24,26,0.07);
  --sh-md:0 6px 18px rgba(23,24,26,0.09); --sh-lg:0 14px 30px rgba(23,24,26,0.12);
}

/* --- Structural modifier consumption (no design-specific markup needed) -----
   styles.css implements these once; each design inherits its own values:
     .site{ background:var(--shell-ground-*) via [data-design] selector hooks }
     .hero{ align-items/ text-align : var(--hero-layout) hook }
     .panel{ border / radius : var(--panel) hook }
     .ornament[data-slot="ornament"] : var(--ornament) hook
     .hero__names{ font-weight:var(--display-weight);
                   letter-spacing:var(--display-track);
                   font-size:var(--display-size); }
   Example attribute selectors (Kenji consumes, does not duplicate):
     [data-design] .hero__names{ font-weight:var(--display-weight); }
     [data-design="c"] .ornament{ /* kolam dot-grid, SVG line-draw */ }
     [data-design="d"] .hero{ /* wash background-image, image-set() */ }
   --------------------------------------------------------------------------- */

/* ==========================================================================
   5. Breakpoints + reduced motion
   ========================================================================== */
@media (min-width:480px){ :root{ --gutter:24px; } }
@media (min-width:768px){ :root{ --section-gap:var(--sp-10); } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
    /* R6: scroll-driven timelines are motion too. Pinning the timeline to
       the document (auto) + zeroing delays sends every animation instantly
       to its 100% frame — which is, by §6 discipline, a DESIGNED static
       state. The reduced-motion path is never empty. */
    animation-timeline:auto!important; animation-delay:0s!important;
  }
  /* ambient loops must stop, not just speed up */
  .ambient,.opening-card__play{ animation:none!important; }
}

/* ==========================================================================
   6. ROUND 6 — MOTION SYSTEM  (owner ruling 12 Oct 22:30: "I donot see any
   animations" — the motion now lives HERE, in the token layer)
   Keyframes + choreography tokens live in this file; site/d/designs.css
   consumes them. Register = the five DIRECTION-3 signatures:
     A light-wipe (§165) · B line-wipe (§246) · C kolam line-draw + dots (§327)
     D bloom (§408) · E flame (§489)
   plus the PHERA ARC: the overnight→dawn sweep over the Vijaya muhurat
   22:43–23:35 (the 52-minute window the owner confirmed).

   DISCIPLINE: every keyframe's 100% frame is a DESIGNED STATIC STATE. The
   prefers-reduced-motion guard in §5 forces duration → .01ms and iteration
   count → 1, so the page rests on that 100% frame — a composed picture,
   never an empty one.
   ========================================================================== */

:root{
  /* scroll-choreography windows (consumed by designs.css under
     @supports (animation-timeline: view())) */
  --m-range-entry:entry 15% cover 32%;
  --m-arc-dur:400ms;    /* timed fallback for the dawn arc when scroll-timelines are unsupported */
  /* signature durations — DIRECTION-3 §165/246/327/408/489 */
  --m-wipe-dur:400ms;   /* A — light-wipe */
  --m-thread-dur:220ms; /* B — line-wipe (the vermilion rule) */
  --m-draw-dur:600ms;   /* C — kolam line-draw */
  --m-dot-step:40ms;    /* C — dot stagger */
  --m-bloom-dur:400ms;  /* D — wash bloom */
  --m-flicker-dur:1500ms; /* E — flame flicker */
  /* usha arc — where the dawn line rests at the window's ends */
  --m-arc-open:76%;     /* 22:43 — Vijaya muhurat opens; dawn line waits low */
  --m-arc-close:10%;    /* 23:35 — muhurat closes; dawn risen up the card */
}

/* A — light-wipe: a bronze gradient sweeps across the couple names, 400ms.
   from = band off-left (names solid ink), to = band swept off-right. The `to`
   frame (solid names) is the reduced-motion static state. */
@keyframes m-wipe{
  from{ background-position:0% 0; }
  to  { background-position:132% 0; }
}

/* B — line-wipe: the vermilion rule draws across under the names, 220ms.
   The 100% frame (rule fully drawn) is the static state. */
@keyframes m-thread{
  from{ transform:scaleX(0); }
  to  { transform:scaleX(1); }
}

/* C — kolam line-draw: an SVG path's stroke draws in, 600ms (scroll entry).
   100% (border fully drawn) is the static state. */
@keyframes m-draw{
  from{ stroke-dashoffset:140; }
  to  { stroke-dashoffset:0; }
}

/* C — kolam dots: grid dots come up staggered (40ms each per designs.css).
   Staggered via delays; a single dot with delay 0 ends opaque = static state. */
@keyframes m-dots{
  from{ opacity:0; }
  to  { opacity:1; }
}

/* D — bloom: the watercolour wash settles 1.03→1 behind the hero, 400ms.
   100% (settled, opaque) is the static state. */
@keyframes m-bloom{
  from{ opacity:0; transform:scale(1.03); }
  to  { opacity:1; transform:scale(1); }
}

/* E — flame: the diya's slow CSS flicker; ends fully lit (static state).
   Direction: normal + iteration 1 under reduced-motion lands on `to` (lit). */
@keyframes m-diya{
  0%,100%{ opacity:1; }
  50%    { opacity:.74; }
}

/* THE PHERA ARC — overnight→dawn across the phera card.
   The dawn line's travel maps to the Vijaya muhurat window:
     0%   = 22:43 — window opens; deep night; the dawn line waits low (76%)
     50%  = ~23:10 — mid-window; the line climbs the card (44%)
     100% = 23:35 — window closes; dawn risen to the top of the card (10%)
   Driven by the phera card's view() timeline in designs.css (scroll
   choreography); with `both` fill, 100% is both the resting state and the
   reduced-motion static state (dawn risen — a designed picture, not empty). */
@keyframes m-usha-arc{
  0%  { top:76%; }
  50% { top:44%; }
  100%{ top:10%; }
}