/* Colour themes and fonts shared by the site and checkout.
   <html data-theme="sunset|ocean|charcoal"> - set early by theme.js. */

/* ---- Role colours. Light themes derive these from their palette; Charcoal sets its own. ---- */
:root {
  --surface: #ffffff;              /* converter card, inputs, checkout boxes */
  --card-border: transparent;
  --panel: var(--ink);             /* dark panels: price box, footer */
  --contrast: var(--ink);          /* filled pills/buttons: top-bar CTA, active step, active theme */
  --contrast-hover: var(--ink-hover);
  --on-contrast: #ffffff;
  --on-brand: #ffffff;             /* text on brand-coloured buttons */
  --danger-bg: #fef3f2;
  --switch-bg: rgba(255, 255, 255, 0.7);
  --staff: #1d1b22;                /* hero stave lines */
  --key-frame: var(--ink);         /* piano: frame + black keys */
  --key-white: #ffffff;
  --key-label: var(--ink);
}

/* ---- Sunset (default): the original orange logo ---- */
:root {
  --ink: #1d1b22;
  --ink-hover: #000000;
  --muted: #5f5a66;
  --soft: #9b8f84;
  --line: #ece6df;
  --bg: #ffffff;
  --cream: #fff8f0;
  --cream-hover: #fff0e3;
  --drop-border: #f3c9a8;
  --brand: #e2410f;
  --brand-dark: #bf340a;
  --brand-mid: #f07a1a;
  --accent: #f7b42c;
  --on-ink: #f4f1ec;
  --on-ink-muted: #a9a3b3;
  --hero-top: #fff1e3;
  --hero-bottom: #ffe6d1;
  --hero-glow-1: rgba(247, 180, 44, 0.55);
  --hero-glow-2: rgba(226, 65, 15, 0.22);
  --shadow-tint: rgba(120, 50, 10, 0.45);
  --ok: #1f7a3d;
  --danger: #b42318;
}

/* ---- Ocean: blue-green logo ---- */
:root[data-theme="ocean"] {
  --ink: #0f2a33;
  --ink-hover: #061a20;
  --muted: #4f6268;
  --soft: #7f9499;
  --line: #d8eae8;
  --cream: #eef8f6;
  --cream-hover: #e1f3f0;
  --drop-border: #a9dcd6;
  --brand: #0b7a8f;
  --brand-dark: #075e6e;
  --brand-mid: #1597a5;
  --accent: #3cc6a0;
  --on-ink: #eaf5f4;
  --on-ink-muted: #9fb6bb;
  --hero-top: #e8f7f5;
  --hero-bottom: #d3eef0;
  --hero-glow-1: rgba(60, 198, 160, 0.45);
  --hero-glow-2: rgba(21, 134, 189, 0.25);
  --shadow-tint: rgba(10, 80, 90, 0.4);
}

/* ---- Charcoal: dark theme in black and greys - the only colour left is in the notes ---- */
:root[data-theme="charcoal"] {
  color-scheme: dark;
  --ink: #ececee;
  --ink-hover: #ffffff;
  --muted: #a6a6ad;
  --soft: #7a7a82;
  --line: #2e2e33;
  --bg: #111113;
  --surface: #1a1a1d;
  --card-border: #2a2a2f;
  --cream: #222226;
  --cream-hover: #2a2a2f;
  --drop-border: #4a4a52;
  --brand: #e6e6e9;
  --brand-dark: #ffffff;
  --brand-mid: #b5b5bc;
  --accent: #7c7c84;
  --on-brand: #111113;
  --panel: #242428;
  --contrast: #f0f0f2;
  --contrast-hover: #ffffff;
  --on-contrast: #111113;
  --on-ink: #ececee;
  --on-ink-muted: #8f8f97;
  --hero-top: #1c1c20;
  --hero-bottom: #111113;
  --hero-glow-1: rgba(255, 255, 255, 0.07);
  --hero-glow-2: rgba(255, 255, 255, 0.04);
  --shadow-tint: rgba(0, 0, 0, 0.75);
  --ok: #6fcf8f;
  --danger: #ff9b8f;
  --danger-bg: #3a1e1c;
  --switch-bg: rgba(255, 255, 255, 0.06);
  --staff: #ffffff;
  --key-frame: #000000;
  --key-white: #e9e9ec;
  --key-label: #141416;
}

/* ---- Fonts: characterful Bricolage Grotesque headings, clean Figtree text ---- */
:root {
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Figtree", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.035em;
  --em-style: normal;
  --body-size: 16px;
}

/* ---- Logo swap: each page carries every theme's logo, the theme shows one ---- */
.logo--ocean, .logo--charcoal { display: none !important; }
:root[data-theme="ocean"] .logo--sunset,
:root[data-theme="charcoal"] .logo--sunset { display: none !important; }
:root[data-theme="ocean"] .logo--ocean,
:root[data-theme="charcoal"] .logo--charcoal { display: block !important; }

/* ---- Theme switch (top bar) ---- */
.theme-switch {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px;
  background: var(--switch-bg); border: 1px solid var(--line);
}
.theme-switch button {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px;
  border: 0; border-radius: 999px; padding: 4px 12px 4px 6px; cursor: pointer;
  background: none; color: var(--muted); font: 500 14px var(--body);
}
.theme-switch button[aria-pressed="true"] { background: var(--contrast); color: var(--on-contrast); }
.theme-switch button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.theme-switch__dot { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6); }
.theme-switch__dot--sunset { background: linear-gradient(135deg, #e2410f, #f7b42c); }
.theme-switch__dot--ocean { background: linear-gradient(135deg, #1586bd, #3cc6a0); }
.theme-switch__dot--charcoal { background: linear-gradient(135deg, #111113, #8a8a92); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); }