/* Scattered Pearls — design tokens (source of truth).
   Three layers:
     Foundation  — theme-agnostic scales (type, space, radii, motion) on :root.
     Theme       — light (warm) is the default; dark follows the OS via
                   prefers-color-scheme, or is forced with [data-theme="dark"].
                   [data-theme="warm"|"light"] forces light.
     Semantic    — the slots components consume (--surface-*, --text, --accent,
                   --pad-*, …). Components reference ONLY these slots (plus the
                   documented --sp-* type/space/radii scales) — never raw theme
                   colours — so a theme swap re-skins an app without code changes.
   Colour choices meet WCAG AA (see contrast notes). */

:root {
  /* ── Foundation · scales (theme-agnostic) ── */
  --sp-font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --sp-font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;

  --sp-text-xs:   0.72rem;
  --sp-text-sm:   0.82rem;
  --sp-text-md:   0.95rem;   /* base */
  --sp-text-lg:   1.15rem;
  --sp-text-xl:   1.55rem;
  --sp-text-2xl:  2.20rem;
  --sp-text-3xl:  3.40rem;

  --sp-weight-regular:  400;
  --sp-weight-medium:   500;
  --sp-weight-semibold: 600;
  --sp-weight-bold:     700;
  --sp-weight-black:    800;

  --sp-leading-tight:  1.05;
  --sp-leading-snug:   1.20;
  --sp-leading-normal: 1.50;

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

  --sp-space-1: 4px;  --sp-space-2: 8px;  --sp-space-3: 12px; --sp-space-4: 16px;
  --sp-space-5: 24px; --sp-space-6: 32px; --sp-space-7: 48px; --sp-space-8: 64px;

  --sp-radius-sm: 8px; --sp-radius-md: 14px; --sp-radius-lg: 18px;
  --sp-radius-xl: 22px; --sp-radius-pill: 999px;

  --sp-ease: cubic-bezier(.2, .7, .3, 1);
  --sp-dur-fast: 0.12s; --sp-dur-base: 0.20s;

  /* ── Theme · light (warm) — default appearance ── */
  --sp-paper:        #f6f1e9;
  --sp-surface:      #fffdf9;
  --sp-surface-2:    #efe8dc;
  --sp-ink:          #2a2420;
  --sp-ink-soft:     #4a4139;
  --sp-muted:        #736a5e;   /* 4.7:1 on paper, 5.2:1 on surface */
  --sp-line:         rgba(42, 36, 32, .09);
  --sp-line-strong:  rgba(42, 36, 32, .16);

  --sp-shadow-1: 0 1px 2px rgba(42, 36, 32, .05);
  --sp-shadow-2: 0 2px 6px rgba(42, 36, 32, .06);
  --sp-shadow-3: 0 14px 34px rgba(42, 36, 32, .08);

  --sp-accent:          #6d4fc0;   /* purple (Blitzfingers primary) — white text 5.95:1 */
  --sp-accent-strong:   #5a3fb0;   /* gradient dark end; white text 7.6:1 */
  --sp-accent-2:        #22796d;   /* deep teal — secondary chrome; white text 5.2:1 */
  --sp-accent-2-strong: #1a6255;
  --sp-highlight:       #ffd23f;   /* yellow bolt — highlight only (not text/fills; poor contrast) */
  --sp-danger-color:    #c8372a;   /* red — destructive only; text 5.1:1 on surface */
  --sp-accent-soft:     rgba(109, 79, 192, .14);
  --sp-accent-2-soft:   rgba(34, 121, 109, .16);
  --sp-danger-soft:     rgba(200, 55, 42, .12);

  /* Per-sound identity palette — jewel tones (same family as the studio pearls).
     Colour is a usability aid: each sound keeps its own hue so the eye finds it
     fast. Every colour passes white text ≥4.5:1 (used at full strength on an
     active pad); idle pads mix it ~16% into the surface, so theme text carries.
     The loop/one-shot split is carried by label + glyph, not by colour. */
  --sp-pad-coral:  #c53f36;
  --sp-pad-amber:  #8f6412;
  --sp-pad-green:  #3f7d3a;
  --sp-pad-teal:   #1f8477;
  --sp-pad-blue:   #3a5bc7;
  --sp-pad-purple: #6d4fc0;
  --sp-pad-rose:   #b23a6a;
  --sp-pad-slate:  #566173;

  --sp-key-bg:      rgba(42, 36, 32, .10);
  --sp-vol-track:   rgba(42, 36, 32, .12);
  --sp-vol-fill:    rgba(42, 36, 32, .45);
  --sp-sheet-shadow: 0 -8px 30px rgba(42, 36, 32, .18);

  /* ── Semantic slots (theme-agnostic mappings — the app's contract) ── */
  --surface-0:     var(--sp-paper);
  --surface-1:     var(--sp-surface);
  --surface-2:     var(--sp-surface-2);
  --text:          var(--sp-ink);
  --text-soft:     var(--sp-ink-soft);
  --text-muted:    var(--sp-muted);
  --border:        var(--sp-line);
  --border-strong: var(--sp-line-strong);

  --accent:        var(--sp-accent);
  --accent-text:   #6d4fc0;   /* accent AS ink (light) — 5.86 / 5.29 / 4.89 on paper/surface/surface-2 */
  --accent-2:      var(--sp-accent-2);
  --on-accent:     #ffffff;
  --accent-soft:   var(--sp-accent-soft);
  --accent-2-soft: var(--sp-accent-2-soft);
  --danger:        var(--sp-danger-color);
  --danger-soft:   var(--sp-danger-soft);
  --focus-ring:    rgba(109, 79, 192, .6);

  --radius-control: var(--sp-radius-md);
  --radius-pad:     var(--sp-radius-lg);
  --radius-sheet:   var(--sp-radius-xl);

  --font-display:   var(--sp-font-display);
  --font-body:      var(--sp-font-body);

  /* Sound pads */
  --pad-bg:               var(--sp-surface-2);
  --pad-text:             var(--sp-ink-soft);
  --pad-border:           var(--sp-line);
  --pad-loop-active-bg:   linear-gradient(160deg, var(--sp-accent), var(--sp-accent-strong));
  --pad-shot-active-bg:   linear-gradient(160deg, var(--sp-accent-2), var(--sp-accent-2-strong));
  --pad-active-text:      var(--on-accent);
  --pad-active-shadow:    0 8px 22px rgba(90, 63, 176, .30);
  --pad-active-ring:      0 0 0 2px var(--focus-ring), 0 8px 26px rgba(90, 63, 176, .38);
  --pad-add-border:       1px dashed var(--sp-line-strong);

  /* Keycaps, volume indicator, sheet elevation */
  --key-bg:         var(--sp-key-bg);
  --key-active-bg:  rgba(255, 255, 255, .22);
  --vol-track:      var(--sp-vol-track);
  --vol-fill:       var(--sp-vol-fill);
  --sheet-shadow:   var(--sp-sheet-shadow);
}

/* ── Theme · dark ──────────────────────────────────────────────────────
   Overrides the raw theme colours; the semantic slots above follow. Applies
   when the OS is dark (unless a light theme is forced) and when [data-theme="dark"]
   is set. Accents stay the deep purple (white text still passes on dark). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="warm"]):not([data-theme="light"]) {
    --sp-paper:        #17151b;
    --sp-surface:      #201d26;
    --sp-surface-2:    #2a2531;
    --sp-ink:          #f1ede6;
    --sp-ink-soft:     #cfc7bb;
    --sp-muted:        #a49a8d;
    --sp-danger-color: #ef9a8f;   /* soft red — readable on dark (7.7:1) */
    --sp-danger-soft:  rgba(239, 154, 143, .16);
    --sp-line:         rgba(255, 255, 255, .10);
    --sp-line-strong:  rgba(255, 255, 255, .18);
    --sp-shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
    --sp-shadow-2: 0 2px 8px rgba(0, 0, 0, .50);
    --sp-shadow-3: 0 14px 34px rgba(0, 0, 0, .55);
    --sp-key-bg:       rgba(255, 255, 255, .14);
    --sp-vol-track:    rgba(255, 255, 255, .12);
    --sp-vol-fill:     rgba(255, 255, 255, .50);
    --sp-sheet-shadow: 0 -8px 30px rgba(0, 0, 0, .55);
    --accent-text:     #9e8ae0;   /* accent AS ink (dark) — 6.18 / 5.66 / 5.09; = focus-ring rgba(158,138,224,.95) */
  }
}
[data-theme="dark"] {
  --sp-paper:        #17151b;
  --sp-surface:      #201d26;
  --sp-surface-2:    #2a2531;
  --sp-ink:          #f1ede6;
  --sp-ink-soft:     #cfc7bb;
  --sp-muted:        #a49a8d;
  --sp-danger-color: #ef9a8f;   /* soft red — readable on dark (7.7:1) */
  --sp-danger-soft:  rgba(239, 154, 143, .16);
  --sp-line:         rgba(255, 255, 255, .10);
  --sp-line-strong:  rgba(255, 255, 255, .18);
  --sp-shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
  --sp-shadow-2: 0 2px 8px rgba(0, 0, 0, .50);
  --sp-shadow-3: 0 14px 34px rgba(0, 0, 0, .55);
  --sp-key-bg:       rgba(255, 255, 255, .14);
  --sp-vol-track:    rgba(255, 255, 255, .12);
  --sp-vol-fill:     rgba(255, 255, 255, .50);
  --sp-sheet-shadow: 0 -8px 30px rgba(0, 0, 0, .55);
  --accent-text:     #9e8ae0;   /* accent AS ink (dark) — 6.18 / 5.66 / 5.09; = focus-ring rgba(158,138,224,.95) */
}

/* ── Increase Contrast (maps to iOS "Increase Contrast" / Android high contrast) ──────
   Drops the muted step to full body text, strengthens borders and the focus ring.
   Scoped per theme so it composes with the light/dark blocks above. */
@media (prefers-contrast: more) {
  :root:not([data-theme="dark"]) {                 /* light (auto or forced) */
    --sp-muted:       var(--sp-ink-soft);
    --sp-line:        rgba(42, 36, 32, .28);
    --sp-line-strong: rgba(42, 36, 32, .5);
    --focus-ring:     rgba(90, 63, 176, .9);
  }
  [data-theme="dark"] {                            /* forced dark */
    --sp-muted:       var(--sp-ink-soft);
    --sp-line:        rgba(255, 255, 255, .30);
    --sp-line-strong: rgba(255, 255, 255, .5);
    --focus-ring:     rgba(158, 138, 224, .95);
  }
}
@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
  :root:not([data-theme="warm"]):not([data-theme="light"]) {   /* dark (auto) — wins on specificity */
    --sp-muted:       var(--sp-ink-soft);
    --sp-line:        rgba(255, 255, 255, .30);
    --sp-line-strong: rgba(255, 255, 255, .5);
    --focus-ring:     rgba(158, 138, 224, .95);
  }
}

/* ── Brand surface — the studio marketing ground ───────────────────────────
   A third surface, distinct from the app's light/dark paper/ink themes: one
   fixed branded ground (ink, nacre pearls, a gold thread) for the studio website
   and future app landing pages. Theme-agnostic on purpose — it does NOT follow
   prefers-color-scheme; it is always this dark ground. Opt in with
   data-surface="brand" on <html>. It uses its own token names, so it never
   collides with the app theme slots above (a page consuming it also keeps the
   type/space/radius scales from :root). Contrast on --sp-ground: --sp-on-ground
   17.6:1, --sp-eyebrow 11.4:1, --sp-on-ground-2 passes AA for body. Plum until
   2026-10-17, ink since — with the strand mark (see DECISIONS.md). */
[data-surface="brand"] {
  color-scheme: dark;

  --sp-ground:       #150f19;   /* ink — near-black with a violet cast */
  --sp-ground-warm:  #3b2228;   /* lower-left field, a warm glow */
  --sp-ground-rose:  #34224a;   /* upper-right field, a violet glow */
  --sp-on-ground:    #fdf6ee;   /* cream — 17.6:1 on the base */
  --sp-on-ground-2:  rgba(253, 246, 238, .84);   /* body copy — passes AA */
  --sp-on-ground-3:  rgba(253, 246, 238, .74);   /* footer */
  --sp-eyebrow:      #e8c48a;   /* the gold of the thread — 11.4:1 on the base */
  --sp-card:         #fdf8f0;   /* the cream card */
  --sp-card-ink:     #2a2420;
  --sp-card-ink-2:   #4a4139;
  --sp-card-muted:   #736a5e;
  --sp-card-link:    #7a3a5c;   /* a link on the cream card — 7.7:1 */
}