/* ═══════════════════════════════════════════
   shubh-vivah — design tokens
   Palette:    sage-cream (_shared/tokens/palettes.json, ground: light), EXTENDED:
               13 of its 15 tokens overridden for the founder's haveli-pastel art
               (sage and ember kept). Every value + ratio is in concept.md.
   Typography: cinzel-cormorant-great-vibes (_shared/tokens/typography.json; added by
               this template, one additive pairing with a 4th `devanagari` slot)
   Easings:    expo-out · breath · silk · drift · stage   (_shared/tokens/easings.json)
               plus `settle` (EXTENSION: the garland drop's damped pendulum)

   Mirrors _shared/css/tokens-base.css. The palette block keeps the shared 15-token
   vocabulary and clears the same audits as every shared palette
   (__tests__/lib/palette-contrast.test.ts, computed with src/lib/palette-contrast.ts):
   ground light (bg-primary lum 0.945); text-primary 12.06 and text-secondary 9.51 on
   bg-primary; accent-warm 6.27, accent-celestial 5.37, sage 5.79 on bg-primary; spark
   lum 0.982 > 0.945.

   This is a SCROLL CARD over illustrations, not a palette ground: every page's text sits
   on its own art. So text colour is per scene: [data-scene] blocks at the bottom set
   --ink / --ink-title / --ink-script / --rule / --scrim for the page they're on.
   Ratios were computed against the art's text-zone colours (briefs/shubh-vivah/
   image-prompts.md colour table), worst stop, scrim included. Re-sample the delivered
   WebPs' text zones before ship (concept.md, "Re-check on delivery").

   Sizes use cqi, not vw: the card is a centred column (max 480px) whose element
   `.sv-card` is `container-type: inline-size`, so desktop does not blow the type up.
   ═══════════════════════════════════════════ */

:root {
    color-scheme: light;

    /* ───── Palette: sage-cream, extended ("haveli") ───── */
    --void: #fffdf8;                 /* lightest cream: the desktop gutters, the cover before art loads */
    --bg-primary: #fff8ec;           /* cream mist = arch-sky's top. The audited ground */
    --bg-elevated: #f6d9be;          /* peach = arch-sky's deepest text-zone stop (worst case on the arch) */

    --accent-warm: #7a5618;          /* antique gold: divider rules, the button's border, small marks (6.27) */
    --accent-warm-bright: #c9a24a;   /* the art's gold (wreath ring, particle palette). Decorative, never text (2.27) */
    --accent-warm-deep: #6e4e14;     /* deep antique gold: the couple's names in the ring (7.20; 6.51 worst) */

    --accent-rose: #e88aa6;          /* lotus pink. Decorative only */
    --accent-soft: #f4c9c4;          /* blush. Decorative only */
    --accent-celestial: #1f6f8b;     /* peacock teal: contract mark; not used as text (5.37) */

    --text-primary: #5e1830;         /* deep maroon: detail text on cream/arch/garden, chrome ink (12.06) */
    --text-secondary: #7a1f3d;       /* maroon (= emblem colour): titles and script on the arch (9.51) */

    --wine: #6b2d5c;                 /* plum: the invitation's "Wedding" script (9.23) */
    --sage: #3f6b52;                 /* kept from sage-cream. Contract only */
    --ember: #8c3a1e;                /* kept from sage-cream. Contract only (nothing here alerts) */
    --spark: #fffdf7;                /* glints: lighter than every light scene's text zone */

    /* ───── Glow + glass (derived from this palette, light-ground alphas) ─────
       Light worlds do not glow: these are soft gold shadows and a cream glass. */
    --accent-warm-glow: rgba(122, 86, 24, 0.28);
    --accent-warm-glow-soft: rgba(122, 86, 24, 0.10);
    --glass: rgba(255, 248, 236, 0.88);              /* chrome pills: hint, mute. maroon on it >= 9.54 even over #1E2240 */
    --glass-border: rgba(122, 86, 24, 0.30);
    --glass-border-hover: rgba(122, 86, 24, 0.55);
    --bloom: rgba(255, 253, 248, 0.85);              /* a light-ground bloom is LIGHTER than the paper */
    --chrome-shadow: 0 2px 10px rgba(94, 24, 48, 0.16);

    /* ───── Per-scene washes: the backdrop's colours as a CSS gradient. ─────
       Painted under each backdrop <img> so a page that settles before its image has
       decoded still has the right ground (and the right text contrast). */
    --wash-arch: linear-gradient(180deg, #fff8ec 0%, #fceae0 40%, #f6d9be 72%, #9ccfcf 88%, #6fb3b5 100%);
    --wash-garden: linear-gradient(180deg, #f9e1da 0%, #fff6ec 56%, #a9c9c6 72%, #6e8b6a 100%);
    --wash-engagement: linear-gradient(180deg, #1e2240 0%, #4a3f6b 33%, #8a6f9a 65%, #2b2b33 100%);
    --wash-haldi: linear-gradient(180deg, #fff6d9 0%, #fff6d9 52%, #f7e08a 70%, #f29e1f 100%);
    --wash-mehendi: linear-gradient(180deg, #f4ead5 0%, #f4ead5 58%, #4e7d3a 76%, #2e6b4f 100%);
    --wash-sangeet: linear-gradient(180deg, #1f4e5a 0%, #3c7a86 33%, #e7b98a 65%, #3b4a8c 100%);
    --wash-wedding: linear-gradient(180deg, #ddeff7 0%, #f7fbfd 52%, #d98a7e 70%, #6faf4e 100%);
    --wash-reception: linear-gradient(180deg, #6b3f69 0%, #e8b4b8 62%, #4f7f45 100%);
    --wash-celebration: linear-gradient(180deg, #f8d3b0 0%, #f3a87a 60%, #e8751a 85%, #2e6b4f 100%);
    --wash-finale: linear-gradient(180deg, #f9d9c2 0%, #fff4e8 56%, #7fa36b 80%, #4f7f45 100%);

    /* ───── Scrims ─────
       LIGHT pages: a cream "lift" behind the text block. It only lightens, so it can only
       raise a dark ink's ratio; it is insurance against bokeh/glow spots in the art.
       NIGHT/DUSK pages: a "veil" of the sky's own darkest colour, deepening downward
       where the painted sky lightens toward the horizon. Full width, so it reads as the
       dusk deepening, never as a box. Stops are % of the page height. */
    --lift-cream: radial-gradient(ellipse 80% 58% at 50% 30%, rgba(255, 250, 240, 0.55) 0%, rgba(255, 250, 240, 0.32) 55%, rgba(255, 250, 240, 0) 100%);
    --lift-butter: radial-gradient(ellipse 80% 58% at 50% 30%, rgba(255, 248, 224, 0.50) 0%, rgba(255, 248, 224, 0.30) 55%, rgba(255, 248, 224, 0) 100%);
    --lift-sky: radial-gradient(ellipse 80% 58% at 50% 30%, rgba(250, 253, 255, 0.50) 0%, rgba(250, 253, 255, 0.28) 55%, rgba(250, 253, 255, 0) 100%);
    --veil-engagement: linear-gradient(180deg, rgba(30, 34, 64, 0) 0%, rgba(30, 34, 64, 0.18) 18%, rgba(30, 34, 64, 0.34) 40%, rgba(30, 34, 64, 0.42) 56%, rgba(30, 34, 64, 0) 70%);
    --veil-sangeet: linear-gradient(180deg, rgba(22, 60, 70, 0) 0%, rgba(22, 60, 70, 0.16) 18%, rgba(22, 60, 70, 0.50) 40%, rgba(22, 60, 70, 0.66) 56%, rgba(22, 60, 70, 0) 70%);
    --veil-reception: linear-gradient(180deg, rgba(74, 38, 72, 0.10) 0%, rgba(74, 38, 72, 0.30) 18%, rgba(74, 38, 72, 0.58) 40%, rgba(74, 38, 72, 0.74) 56%, rgba(74, 38, 72, 0) 70%);
    /* ivory text on night/dusk also carries a soft static halo (painted once) */
    --halo-night: 0 1px 10px rgba(20, 22, 44, 0.55);
    --halo-sangeet: 0 1px 10px rgba(14, 40, 48, 0.55);
    --halo-reception: 0 1px 10px rgba(52, 24, 50, 0.55);

    /* ───── The cover's mist (no CSS blur anywhere: blur janks on budget Android) ─────
       Three layers over the arch: the veil (fades out), two wisps (part sideways and
       swell as they fade), and a lake fog band (sinks). Text on the veil: 11.78 / 9.29. */
    --mist-veil: radial-gradient(ellipse 120% 90% at 50% 45%, rgba(255, 248, 236, 0.97) 0%, rgba(255, 248, 236, 0.90) 50%, rgba(255, 246, 232, 0.72) 100%);
    --mist-wisp: radial-gradient(closest-side, rgba(255, 250, 242, 0.85) 0%, rgba(255, 250, 242, 0.45) 55%, rgba(255, 250, 242, 0) 100%);
    --mist-floor: linear-gradient(0deg, rgba(255, 250, 242, 0.95) 0%, rgba(255, 250, 242, 0.6) 18%, rgba(255, 250, 242, 0) 38%);
    --mist-art-scale-from: 1.06;     /* arch-sky + arch-frame scale at the cover; settle to 1 */
    --mist-frame-opacity-from: 0.55; /* the arch frame is a ghost through the mist */

    /* ───── The names (the-names, inside the wreath) ───── */
    --ink-names: var(--accent-warm-deep);            /* #6e4e14 on the ring glow: 6.95 (6.51 worst, over peach) */
    --names-lit: #f6dc95;                            /* the names as revealed out of the light, on the dusk disc: >= 5.33 */
    /* The dusk disc: the ring dims like a lamp-lit jewel box so the gold light can read on
       a cream world. Sized to the ring's interior (closest-side). Light golds on it:
       #E6C878 8.89 centre / 4.66 at r=0.80; the assembled text never passes r=0.80. */
    --names-dusk: radial-gradient(circle closest-side, rgba(46, 14, 30, 0.92) 0%, rgba(46, 14, 30, 0.88) 60%, rgba(46, 14, 30, 0.70) 82%, rgba(46, 14, 30, 0) 100%);
    /* After the dusk lifts: a cream glow under the names for good. */
    --ring-glow: radial-gradient(circle closest-side, rgba(255, 250, 240, 0.78) 0%, rgba(255, 250, 240, 0.55) 70%, rgba(255, 250, 240, 0) 100%);
    /* ReveelHero palette (0-255 triples, deep to light): the deep two read on cream during
       the burst's flight (#96681E 4.63, #B0842E 3.22), the light three on the dusk disc. */
    --names-particles: "[[150,104,30],[176,132,46],[201,162,74],[230,200,120],[255,226,160]]";

    /* ───── Typography: cinzel-cormorant-great-vibes ─────
       https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&display=swap
       https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap
       https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap
       https://fonts.googleapis.com/css2?family=Tiro+Devanagari+Hindi&display=swap   (only when invocation is set) */
    --font-display: 'Cinzel', 'Trajan Pro', 'Georgia', serif;                 /* titles, names, dates, venues, buttons */
    --font-body: 'Cormorant Garamond', 'Georgia', serif;                       /* family lines, messages, connectors */
    --font-script: 'Great Vibes', 'Snell Roundhand', cursive;                  /* taglines and short display lines ONLY */
    --font-devanagari: 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', 'Cormorant Garamond', serif; /* the invocation (carries Latin too) */

    /* Type scale. Minimums are at a 360px-wide card. Detail text never below 15px. */
    --type-kicker: 0.9375rem;                                /* 15px Cinzel 600, +0.12em tracking, caps */
    --type-title: clamp(1.75rem, 8.4cqi, 2.25rem);           /* 30px: event titles, Cinzel 600, max 2 lines */
    --type-title-sm: clamp(1.375rem, 6.4cqi, 1.75rem);       /* 23px: with-love title, programme title */
    --type-name: clamp(1.625rem, 7.6cqi, 2rem);              /* 27px: names on the invitation, Cinzel 700 */
    --type-name-ring-max: 2.625rem;                          /* 42px: names in the ring, fitted down to --type-name-ring-min */
    --type-name-ring-min: 1.5rem;                            /* 24px */
    --type-family: clamp(1.25rem, 5.6cqi, 1.5rem);           /* 20px: hostFamily caps on with-love, Cinzel 700 */
    --type-script-hero: clamp(2.75rem, 13cqi, 3.5rem);       /* 47px: "Wedding", "Welcome", "With love", "Dear {guest}" */
    --type-script: clamp(1.625rem, 7.4cqi, 2rem);            /* 27px: taglines, max 2 lines */
    --type-detail-caps: clamp(1.0625rem, 4.8cqi, 1.1875rem); /* 17px: dates, times, venues; Cinzel 600 caps */
    --type-detail: clamp(1.125rem, 5.1cqi, 1.3125rem);       /* 18px: family lines, messages; Cormorant 600 */
    --type-connector: 1.125rem;                              /* 18px: "of", "and", "at"; Cormorant 600 italic */
    --type-invocation: clamp(1.375rem, 6.2cqi, 1.625rem);    /* 22px: Tiro Devanagari Hindi */
    --type-hint: 0.9375rem;                                  /* 15px: "Swipe up", "Tap to open"; Cinzel 600 */
    --fit-floor: 0.88;                                       /* the text-block fit may scale type to 88%, no lower */
    --tracking-caps: 0.06em;
    --tracking-kicker: 0.12em;
    --leading-detail: 1.32;
    --leading-script: 1.18;

    /* ───── Layout ───── */
    --card-max: 480px;               /* the column on tablets/desktop; gutters are --void */
    --text-zone-top: 7%;             /* text blocks live in the art's empty top band */
    --text-zone-bottom: 55%;         /* ...and must end above this (the art's detail starts ~56%) */
    --col-arch: min(66cqi, 340px);   /* inside the arch opening (pillars are 14.6% each side) */
    --col-scene: min(84cqi, 420px);  /* every other page */
    --rule-width: min(46cqi, 220px); /* divider length; 1px line with 5px diamond ends */

    /* ───── Parallax rates (screen position = (1 - r) x the page's offset) ───── */
    --px-backdrop: 0.22;             /* opaque scene / arch-sky: lags (far) */
    --px-frame: 0.10;                /* arch-frame */
    --px-text: 0;                    /* text, veil, lift: move exactly with the swipe */
    --px-hang: -0.06;                /* hanging decor, chandeliers, swags: a touch ahead (near) */
    --px-figure: -0.04;              /* the couple */
    --px-fore: -0.08;                /* lotus band, vines: nearest */

    /* ───── Chrome ───── */
    --chrome-ink: var(--text-primary);
    --hit-min: 48px;                 /* every tappable thing */
    --z-page: 0;
    --z-chrome: 20;

    /* ───── Easings ───── */
    --ease-silk: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-back-out: cubic-bezier(0.34, 1.56, 0.64, 1);    /* declared by the contract; NOT used in this card */
    --ease-breath: cubic-bezier(0.45, 0, 0.55, 1);
    --ease-snap: cubic-bezier(0.5, 0, 0.5, 1);             /* the mute button's press only */
    --ease-drift: cubic-bezier(0.4, 0, 0.6, 1);
    --ease-stage: cubic-bezier(0.83, 0, 0.17, 1);
    /* EXTENSION: the per-keyframe curve of the garland drop's damped swing (see `sv-drop-settle`
       in concept.md). Symmetric and gentle; the overshoot is the pendulum's, not a UI bounce. */
    --ease-settle: cubic-bezier(0.37, 0, 0.63, 1);

    /* ───── Motion constants (pages.md uses these names) ───── */
    --dur-title: 500ms;              /* fade + scale 0.92 -> 1 */
    --dur-write: 900ms;              /* script write-on (clip-path wipe, left to right) */
    --dur-rule: 500ms;               /* divider draws from the centre */
    --dur-detail: 500ms;             /* detail fade-up, 10px */
    --dur-drop: 1400ms;              /* garland drop + damped swing */
    --stagger: 300ms;
}

/* ───── Per-scene ink. One block per art world; a page sets data-scene. ─────
   ratios: --ink (detail, >= 4.5) · --ink-title (display, >= 3) · --ink-script (display, >= 3),
   each against the worst text-zone stop (with its scrim). Full table in concept.md. */
[data-scene="arch"] {        /* the-opening, the-names, the cover */
    --ink: #5e1830;          /* 9.45 on peach #F6D9BE */
    --ink-title: #7a1f3d;    /* 7.45 */
    --ink-script: #7a1f3d;   /* 7.45 */
    --rule: #7a5618;         /* 4.91 */
    --scrim: var(--lift-cream);
    --halo: none;
}
[data-scene="garden"] {      /* the-invitation */
    --ink: #5a1830;          /* 10.45 on blush #F9E1DA */
    --ink-title: #7a1f3d;    /* 8.04 */
    --ink-script: #6b2d5c;   /* 7.80 */
    --rule: #7a5618;
    --scrim: var(--lift-cream);
    --halo: none;
}
[data-scene="engagement"] {
    --ink: #fbf3e6;          /* 7.68 worst, on the veiled sky at 56% */
    --ink-title: #fbf3e6;
    --ink-script: #f5c26b;   /* candle gold, 5.16 worst */
    --rule: rgba(245, 194, 107, 0.85);
    --scrim: var(--veil-engagement);
    --halo: var(--halo-night);
    /* dark sky: default sparkles glow in candle gold, not the light-ground brown shadow */
    --accent-warm-glow: rgba(245, 194, 107, 0.45);
    --accent-warm-glow-soft: rgba(245, 194, 107, 0.15);
}
[data-scene="haldi"] {
    --ink: #7e1650;          /* deep magenta-plum, 7.55 on butter #F7E08A */
    --ink-title: #a3175f;    /* magenta, 5.62 */
    --ink-script: #7e1650;
    --rule: #a3175f;
    --scrim: var(--lift-butter);
    --halo: none;
}
[data-scene="mehendi"] {
    --ink: #1f4d38;          /* deep emerald, 8.07 on parchment #F4EAD5 */
    --ink-title: #24543e;    /* 7.29 */
    --ink-script: #7a3e1d;   /* henna, 6.94 */
    --rule: #7a3e1d;
    --scrim: var(--lift-cream);
    --halo: none;
}
[data-scene="sangeet"] {
    --ink: #fff6e6;          /* 5.46 worst, on the veiled sky */
    --ink-title: #fff6e6;
    --ink-script: #ffd27a;   /* bulb gold, 4.11 worst */
    --rule: rgba(255, 210, 122, 0.85);
    --scrim: var(--veil-sangeet);
    --halo: var(--halo-sangeet);
    --accent-warm-glow: rgba(255, 210, 122, 0.45);
    --accent-warm-glow-soft: rgba(255, 210, 122, 0.15);
}
[data-scene="wedding"] {     /* wedding events and the-programme */
    --ink: #7a1f3d;          /* 8.50 on sky #DDEFF7 */
    --ink-title: #b11e35;    /* rose crimson, 5.72 */
    --ink-script: #8e2440;   /* 7.17 */
    --rule: #b11e35;
    --scrim: var(--lift-sky);
    --halo: none;
}
[data-scene="reception"] {
    --ink: #fff6e6;          /* 5.86 worst, on the veiled sky */
    --ink-title: #fff6e6;
    --ink-script: #ffd58a;   /* 4.53 worst */
    --rule: rgba(255, 213, 138, 0.85);
    --scrim: var(--veil-reception);
    --halo: var(--halo-reception);
    --accent-warm-glow: rgba(255, 213, 138, 0.45);
    --accent-warm-glow-soft: rgba(255, 213, 138, 0.15);
}
[data-scene="celebration"] {
    --ink: #5e1a2c;          /* 6.44 on apricot #F3A87A */
    --ink-title: #6b1f2e;    /* 5.75 */
    --ink-script: #7a1a4a;   /* 5.16 */
    --rule: #6b1f2e;
    --scrim: var(--lift-cream);
    --halo: none;
}
[data-scene="finale"] {      /* with-love */
    --ink: #1f4d38;          /* 7.23 on peach #F9D9C2 */
    --ink-title: #1f5e44;    /* emerald, 5.74 */
    --ink-script: #256b4c;   /* 4.79 */
    --rule: #256b4c;
    --scrim: var(--lift-cream);
    --halo: none;
}

/* ───── Reduced motion: parallax off; durations collapse to plain fades in the page CSS. ───── */
@media (prefers-reduced-motion: reduce) {
    :root {
        --px-backdrop: 0;
        --px-frame: 0;
        --px-hang: 0;
        --px-figure: 0;
        --px-fore: 0;
        --mist-art-scale-from: 1;
        --dur-title: 400ms;
        --dur-write: 400ms;
        --dur-rule: 400ms;
        --dur-detail: 400ms;
        --dur-drop: 400ms;
        --stagger: 150ms;
    }
}