/* ==========================================================================
   MerrySongs · design tokens (v2 · 2 Nov 2026)
   Palette "Cranberry & Cream" · Fraunces + DM Sans · mobile-first
   Fonts (Google Fonts, variable):
   https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,400..700,0..100,0..1;1,9..144,400..700,0..100,0..1&family=DM+Sans:opsz,wght@9..40,400..700&display=swap
   Contrast notes are WCAG 2.x ratios. AA: text ≥ 4.5:1, large text / UI ≥ 3:1.

   Structure
   1. :root            mother brand: neutrals, support colour, type, spacing, radii, motion.
                       Motif / pattern slots default to `none` so the base brand is motif-free.
   2. .skin-christmas  Christmas 2026 skin: accent (cranberry + gold), evergreen, motif slots
                       and a few skin utilities. DEFAULT ON: both mocks carry
                       <html class="skin-christmas">. Remove the class to see the base brand.
   3. [data-season]    other seasons override the accent layer and reset the motif slots
                       (Valentine's 2027 sample).
   ========================================================================== */

:root {
  /* ---------- Brand neutrals (do not change per season) ---------- */
  --ms-cream:        #FBF6EC;  /* page background */
  --ms-cream-deep:   #F3EAD9;  /* alternate sections, input backgrounds — ink 12.8:1, ink-2 5.2:1 */
  --ms-white:        #FFFFFF;  /* cards on cream */
  --ms-ink:          #2B2420;  /* text — 14.2:1 on cream, 15.3:1 on white */
  --ms-ink-2:        #6B5E55;  /* secondary text — 5.8:1 on cream, 6.3:1 on white */
  --ms-line:         #E4D9C7;  /* hairlines, dividers (decorative only) */
  --ms-line-strong:  #948571;  /* input borders — 3.3:1 on cream (non-text UI ≥ 3:1) */

  /* ---------- Support colour ---------- */
  --ms-pine:         #1F3A2E;  /* dark blocks, footer, gift-page mock — cream on pine 11.5:1 */
  --ms-pine-light:   #2C4E3E;  /* cards on pine — cream 8.6:1, gold 4.4:1 (large text only) */
  --ms-pine-tint:    #E6EDE8;  /* soft green surfaces — pine 10.4:1 */
  --ms-on-pine-2:    #C9D3CC;  /* secondary text on pine — 8.0:1 */

  /* ---------- Accent (the Christmas values are the brand default; skins re-point them) ---------- */
  --ms-accent:          #B3263E;  /* CTA, highlighted name on light — white 6.4:1, cream 6.0:1 */
  --ms-accent-strong:   #8F1D31;  /* hover / pressed — white 8.8:1 */
  --ms-accent-tint:     #F7E4E7;  /* selected card background — accent 5.3:1, ink 12.5:1 */
  --ms-accent-contrast: #FFFFFF;  /* text on accent */
  --ms-gold:            #E3A93B;  /* glow, stars, name in karaoke ON DARK ONLY — 1.95:1 on cream: never text on light; 5.9:1 on pine; 7.3:1 with ink on top */

  /* ---------- Status (never colour alone: icon + text) ---------- */
  --ms-error:    #A0261C;  /* 7.0:1 on cream */
  --ms-success:  #1F6B47;  /* 6.0:1 on cream */

  /* ---------- Semantic aliases ---------- */
  --bg:            var(--ms-cream);
  --bg-alt:        var(--ms-cream-deep);
  --surface:       var(--ms-white);
  --text:          var(--ms-ink);
  --text-2:        var(--ms-ink-2);
  --line:          var(--ms-line);
  --line-strong:   var(--ms-line-strong);
  --accent:        var(--ms-accent);
  --accent-strong: var(--ms-accent-strong);
  --accent-tint:   var(--ms-accent-tint);
  --accent-contrast: var(--ms-accent-contrast);
  --glow:          var(--ms-gold);
  --dark:          var(--ms-pine);
  --dark-2:        var(--ms-pine-light);
  --on-dark:       var(--ms-cream);
  --on-dark-2:     var(--ms-on-pine-2);
  --focus:         #2F5FC4;  /* focus ring — distinct from accent and from status colours */

  /* Second accent and festive dark surface: the base brand maps them to pine so that
     components written for the Christmas skin still render without it. */
  --accent-2:        var(--ms-pine);
  --accent-2-tint:   var(--ms-pine-tint);
  --accent-2-line:   var(--ms-pine);
  --festive-dark:    var(--ms-pine);
  --festive-dark-2:  var(--ms-pine-light);
  --on-festive:      var(--ms-cream);
  --on-festive-2:    var(--ms-on-pine-2);
  --trim:            var(--ms-line);          /* ribbons, caps, rings on light — the skin turns it gold */
  --trim-strong:     var(--ms-line-strong);

  /* Motif slots: none in the mother brand. Each skin fills them. */
  --pattern-wrap:    none;
  --pattern-knit:    none;
  --band-knit:       none;
  --pattern-snow:    none;
  --lights:          none;
  --lights-dark:     none;
  --divider-motif:   none;
  --drift:           none;
  --stripe:          none;                                          /* candy-cane edge: nothing in the base brand */
  --stripe-fine:     linear-gradient(var(--ms-accent), var(--ms-accent));  /* progress fill: solid accent in the base brand */

  /* ---------- Typography ---------- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-text:    "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --display-settings: "SOFT" 100, "WONK" 0, "opsz" 72;   /* soft, rounded Fraunces */
  --display-settings-wonk: "SOFT" 100, "WONK" 1, "opsz" 144; /* only for the hero H1 */

  /* Mobile scale (390 px) — body ≥ 16 px, inputs 16 px */
  --fs-display: 2.125rem;  /* 34 px · hero H1 */
  --fs-h2:      1.75rem;   /* 28 px */
  --fs-h3:      1.375rem;  /* 22 px */
  --fs-h4:      1.125rem;  /* 18 px */
  --fs-lead:    1.125rem;  /* 18 px · lyrics, sub-headlines */
  --fs-body:    1.0625rem; /* 17 px */
  --fs-small:   0.9375rem; /* 15 px */
  --fs-micro:   0.8125rem; /* 13 px · legal, captions */
  --fs-price:   2rem;      /* 32 px */

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-text:  1.55;
  --lh-lyric: 1.5;

  --tracking-display: -0.015em;
  --tracking-h:       -0.01em;

  /* ---------- Spacing (4 px base) ---------- */
  --sp-1:  0.25rem;  /*  4 */
  --sp-2:  0.5rem;   /*  8 */
  --sp-3:  0.75rem;  /* 12 */
  --sp-4:  1rem;     /* 16 */
  --sp-5:  1.25rem;  /* 20 */
  --sp-6:  1.5rem;   /* 24 */
  --sp-8:  2rem;     /* 32 */
  --sp-10: 2.5rem;   /* 40 */
  --sp-12: 3rem;     /* 48 */
  --sp-16: 4rem;     /* 64 */
  --sp-20: 5rem;     /* 80 */
  --gutter: 1.25rem;        /* 20 px side padding on mobile */
  --container: 70rem;       /* 1120 px */
  --measure: 36rem;         /* ~65 ch of DM Sans 17 px */

  /* ---------- Radii (three sizes only) ---------- */
  --r-sm: 0.5rem;    /*  8 · chips, inputs, small buttons */
  --r-md: 1rem;      /* 16 · cards */
  --r-lg: 1.75rem;   /* 28 · phone mock, hero panels */
  --r-pill: 999px;   /* CTA, play buttons */

  /* ---------- Shadows (warm, ink-tinted, never grey) ---------- */
  --sh-1: 0 1px 2px rgba(43, 36, 32, 0.06), 0 1px 1px rgba(43, 36, 32, 0.04);
  --sh-2: 0 4px 14px rgba(43, 36, 32, 0.10), 0 1px 3px rgba(43, 36, 32, 0.06);
  --sh-3: 0 18px 44px rgba(43, 36, 32, 0.18), 0 4px 10px rgba(43, 36, 32, 0.08);
  --sh-glow: 0 0 18px rgba(227, 169, 59, 0.55), 0 0 2px rgba(227, 169, 59, 0.9);  /* "the name lights up" */

  /* ---------- Controls ---------- */
  --tap-min: 44px;        /* minimum touch target */
  --cta-height: 56px;     /* primary CTA ≥ 52 px */
  --input-height: 52px;
  --ring: 0 0 0 3px var(--bg), 0 0 0 6px var(--focus);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-glow: 900ms;   /* name-glow signature, ≤ 1 s */
  --dur-snow: 26s;     /* falling snow, one full loop of the slowest layer */
}

/* Desktop scale (≥ 960 px) */
@media (min-width: 60rem) {
  :root {
    --fs-display: 3.5rem;    /* 56 px */
    --fs-h2:      2.5rem;    /* 40 px */
    --fs-h3:      1.625rem;  /* 26 px */
    --fs-h4:      1.25rem;   /* 20 px */
    --fs-lead:    1.25rem;   /* 20 px */
    --fs-body:    1.125rem;  /* 18 px */
    --fs-small:   1rem;
    --fs-micro:   0.875rem;
    --fs-price:   2.25rem;   /* 36 px */
    --gutter: 2.5rem;
  }
}

/* ==========================================================================
   2. Christmas 2026 skin  ·  <html class="skin-christmas">  ·  default on
   Adds a deep evergreen and a warm gold layer to Cranberry & Cream, and fills
   the motif slots with the hand-drawn SVGs in ./motifs/.
   Rules: gold is never text on cream (1.95:1). Gold-deep (3.4:1 on cream) is
   ribbons, caps and rings only, never text. Red and green are decoration
   together (holly) but never carry information together.
   ========================================================================== */
.skin-christmas {
  /* ---------- Evergreen layer ---------- */
  --ms-evergreen:        #1E5A3C;  /* holly leaves, trees, eyebrow text — 7.5:1 on cream, 8.1:1 with white on top */
  --ms-evergreen-deep:   #0F4A32;  /* festive dark surface (pricing) — cream 9.5:1, gold 4.9:1, gold-light 6.4:1 */
  --ms-evergreen-line:   #163F2B;  /* hand-drawn outline on leaves and trees */
  --ms-evergreen-tint:   #DFEBE2;  /* soft green surface — evergreen 6.6:1, ink 12.4:1 */
  --ms-holly-light:      #6FAE8B;  /* leaves and needles ON DARK ONLY — 4.8:1 on pine */

  /* ---------- Gold layer ---------- */
  --ms-gold-deep:        #B07D1E;  /* ribbons, bauble caps, play rings on cream — 3.4:1 (UI), NEVER text */
  --ms-gold-light:       #F2C66D;  /* bulbs, stars on dark — 7.7:1 on pine, 6.4:1 on evergreen-deep */
  --ms-cranberry-light:  #E05A6E;  /* berries and ribbon ON DARK ONLY — 3.5:1 on pine; never text on light */
  --ms-snow:             #FFFFFF;  /* snowflakes and drifts on dark */

  /* ---------- Aliases used by components ---------- */
  --accent-2:        var(--ms-evergreen);
  --accent-2-tint:   var(--ms-evergreen-tint);
  --accent-2-line:   var(--ms-evergreen-line);
  --festive-dark:    var(--ms-evergreen-deep);
  --festive-dark-2:  #16583D;                 /* cards on evergreen-deep — cream 8.0:1 */
  --on-festive:      var(--ms-cream);
  --on-festive-2:    #CFE0D5;                 /* secondary text on evergreen-deep — 7.6:1 */
  --trim:            var(--ms-gold);
  --trim-strong:     var(--ms-gold-deep);

  /* ---------- Motif slots (paths relative to this file) ---------- */
  --pattern-wrap:  url("motifs/pattern-wrap.svg");
  --pattern-knit:  url("motifs/pattern-knit.svg");
  --band-knit:     url("motifs/knit-band.svg");
  --pattern-snow:  url("motifs/pattern-snow.svg");
  --lights:        url("motifs/string-lights.svg");
  --lights-dark:   url("motifs/string-lights-dark.svg");
  --divider-motif: url("motifs/divider-holly.svg");
  --drift:         url("motifs/divider-snow.svg");
  --stripe:        repeating-linear-gradient(-45deg, var(--ms-accent) 0 10px, var(--ms-cream) 10px 20px);  /* candy-cane edge */
  --stripe-fine:   repeating-linear-gradient(-45deg, var(--ms-accent) 0 5px, var(--ms-cream) 5px 10px);    /* candy-cane progress fill */
}

/* ---------- Skin utilities (shared by the mocks; implementation may keep or inline them) ---------- */

/* String lights band: 48 px tall, tiles every 240 px, centred so hooks line up. */
.xmas-lights { height: 48px; background: var(--lights) repeat-x center top / 240px 48px; pointer-events: none; }
.xmas-lights.on-dark { background-image: var(--lights-dark); }

/* Section divider: long hairlines with the holly centre piece. */
.xmas-divider { position: relative; height: 40px; background: var(--divider-motif) no-repeat center / 120px 40px; }
.xmas-divider::before, .xmas-divider::after { content: ""; position: absolute; top: 50%; height: 1px; background: #C9BBA3; }
.xmas-divider::before { left: 0; right: calc(50% + 58px); }
.xmas-divider::after  { right: 0; left: calc(50% + 58px); }

/* Snow drift on the top edge of a dark section (the cream page "drifts" onto it). */
.xmas-drift { position: relative; }
.xmas-drift::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 20px; background: var(--drift) repeat-x top / 160px 20px; pointer-events: none; z-index: 1; }

/* Candy-cane stripe edge. */
.xmas-stripe { height: 6px; background: var(--stripe); }

/* Falling snow: three layers of the same tile at 160 / 240 / 320 px, each scrolling 960 px
   (a multiple of all three) so every layer loops seamlessly. Dark backgrounds only. */
.xmas-snow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.xmas-snow::before, .xmas-snow::after, .xmas-snow > i {
  content: ""; position: absolute; inset: -960px 0 0 0; display: block;
  background-image: var(--pattern-snow); background-repeat: repeat;
  animation: xmas-snowfall var(--dur-snow) linear infinite;
}
.xmas-snow::before { background-size: 160px 160px; opacity: .55; }
.xmas-snow::after  { background-size: 240px 240px; opacity: .8;  animation-duration: calc(var(--dur-snow) * .7); background-position: 60px 30px; }
.xmas-snow > i     { background-size: 320px 320px; opacity: .95; animation-duration: calc(var(--dur-snow) * .5); background-position: 130px 80px; }
@keyframes xmas-snowfall { to { transform: translateY(960px); } }

/* ==========================================================================
   3. Other seasons: override the accent layer, empty the motif slots.
   Valentine's 2027 sample (not polished):
   ========================================================================== */
[data-season="valentine"] {
  --ms-accent:        #C2185B;  /* white 6.3:1 */
  --ms-accent-strong: #961244;
  --ms-accent-tint:   #FBE4EE;
  --ms-gold:          #F4B6C2;  /* glow turns blush — 9.4:1 on pine */
  /* aliases resolve at :root, so the skin must re-point them too */
  --accent:        var(--ms-accent);
  --accent-strong: var(--ms-accent-strong);
  --accent-tint:   var(--ms-accent-tint);
  --glow:          var(--ms-gold);
  --sh-glow: 0 0 18px rgba(244, 182, 194, 0.6), 0 0 2px rgba(244, 182, 194, 0.9);
  --accent-2: var(--ms-pine); --accent-2-tint: var(--ms-pine-tint); --accent-2-line: var(--ms-pine);
  --festive-dark: var(--ms-pine); --festive-dark-2: var(--ms-pine-light); --on-festive: var(--ms-cream); --on-festive-2: var(--ms-on-pine-2);
  --trim: var(--ms-line); --trim-strong: var(--ms-line-strong);
  --pattern-wrap: none; --pattern-knit: none; --band-knit: none; --pattern-snow: none;
  --lights: none; --lights-dark: none; --divider-motif: none; --drift: none; --stripe: none;
  --stripe-fine: linear-gradient(var(--ms-accent), var(--ms-accent));
}
[data-season="valentine"] .xmas { display: none !important; }  /* decorative motif elements carry class="xmas" */

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-glow: 0ms; }
  .xmas-snow::before, .xmas-snow::after, .xmas-snow > i { animation: none; inset: 0; }  /* snow stays, static */
}