/* 2027 Marketing Plan: tokens + shared components. Explicit light AND dark values for every token
   (no alpha-only tints). Print always uses the light set (css/print.css). */

:root {
  color-scheme: light;
  --blue: #13B0ED;
  --gold: #FDA628;
  --charcoal: #2C333D;
  --midnight: #0A0726;

  --bg: #F3F5F8;
  --surface: #FFFFFF;
  --surface-2: #EEF2F6;
  --surface-3: #E2E8EF;
  --text: #2C333D;
  --heading: #0A0726;
  --muted: #5C6673;
  --line: #DDE4EC;
  --blue-ink: #08739F;
  --gold-ink: #8F5200;
  --gold-soft: #FFF3DF;
  --blue-soft: #E5F6FD;
  --focus: #0A84C1;
  --danger: #B42318;
  --danger-soft: #FEECEB;

  --mast-bg: #0A0726;
  --mast-bg-2: #16124A;
  --mast-text: #FFFFFF;
  --mast-muted: #C3C8E6;

  --ahead-bg: #E3F5EA; --ahead-fg: #146B3A; --ahead-dot: #22A05A;
  --par-bg: #E4F2FC;   --par-fg: #0B5E8A;   --par-dot: #13B0ED;
  --behind-bg: #FFF0DB; --behind-fg: #8A4A00; --behind-dot: #F08C00;
  --na-bg: #EEF2F6; --na-fg: #5C6673;

  /* chart series (channels): two blues, two golds, two neutrals */
  --c-seo: #13B0ED;
  --c-google: #0A5F86;
  --c-meta: #FDA628;
  --c-mail: #B86A00;
  --c-nurture: #2C333D;
  --c-referral: #9AA5B4;
  --c-retarget: #6B4FBB;
  --c-ott: #E0567A;
  --c-retarget-ink: #FFFFFF; --c-ott-ink: #FFFFFF;
  --c-seo-ink: #0A0726; --c-google-ink: #FFFFFF; --c-meta-ink: #0A0726;
  --c-mail-ink: #FFFFFF; --c-nurture-ink: #FFFFFF; --c-referral-ink: #0A0726;
  --track: #E6EBF1;
  --band: #9FD9F3;
  --f1: #0A0726; --f2: #1C2F6E; --f3: #0A6E99; --f4: #FDA628;
  --f-ink: #FFFFFF; --f4-ink: #0A0726;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px #0A072614, 0 8px 24px #0A07260D;
  --font-head: "League Spartan", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Kollektif", "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #07051C;
    --surface: #131133;
    --surface-2: #1B1940;
    --surface-3: #26234F;
    --text: #E6EAF2;
    --heading: #FFFFFF;
    --muted: #A6AEC2;
    --line: #2C2958;
    --blue-ink: #5CCBF5;
    --gold-ink: #FDBA5A;
    --gold-soft: #33260F;
    --blue-soft: #0F2A44;
    --focus: #5CCBF5;
    --danger: #FF8A80;
    --danger-soft: #3A1517;
    --mast-bg: #0A0726;
    --mast-bg-2: #1A1655;
    --ahead-bg: #10372A; --ahead-fg: #86E3AE; --ahead-dot: #3FCB7E;
    --par-bg: #0F2D47;   --par-fg: #8ED6F8;   --par-dot: #13B0ED;
    --behind-bg: #3A2A0E; --behind-fg: #FFC56B; --behind-dot: #FDA628;
    --na-bg: #1B1940; --na-fg: #A6AEC2;
    --c-seo: #13B0ED; --c-google: #8ADCF9; --c-meta: #FDA628; --c-mail: #FFD597;
    --c-nurture: #E6EAF2; --c-referral: #6E7891;
    --c-retarget: #B7A3F2; --c-ott: #F48FA9; --c-retarget-ink: #0A0726; --c-ott-ink: #0A0726;
    --c-google-ink: #0A0726; --c-mail-ink: #0A0726; --c-nurture-ink: #0A0726; --c-referral-ink: #FFFFFF;
    --track: #242150;
    --band: #1F6E95;
    --f1: #2E2A85; --f2: #23468F; --f3: #0A7FB0; --f4: #FDA628;
    --shadow: 0 1px 2px #00000040, 0 8px 24px #00000033;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07051C; --surface: #131133; --surface-2: #1B1940; --surface-3: #26234F;
  --text: #E6EAF2; --heading: #FFFFFF; --muted: #A6AEC2; --line: #2C2958;
  --blue-ink: #5CCBF5; --gold-ink: #FDBA5A; --gold-soft: #33260F; --blue-soft: #0F2A44;
  --focus: #5CCBF5; --danger: #FF8A80; --danger-soft: #3A1517;
  --mast-bg: #0A0726; --mast-bg-2: #1A1655;
  --ahead-bg: #10372A; --ahead-fg: #86E3AE; --ahead-dot: #3FCB7E;
  --par-bg: #0F2D47; --par-fg: #8ED6F8; --par-dot: #13B0ED;
  --behind-bg: #3A2A0E; --behind-fg: #FFC56B; --behind-dot: #FDA628;
  --na-bg: #1B1940; --na-fg: #A6AEC2;
  --c-seo: #13B0ED; --c-google: #8ADCF9; --c-meta: #FDA628; --c-mail: #FFD597;
  --c-nurture: #E6EAF2; --c-referral: #6E7891;
  --c-retarget: #B7A3F2; --c-ott: #F48FA9; --c-retarget-ink: #0A0726; --c-ott-ink: #0A0726;
  --c-google-ink: #0A0726; --c-mail-ink: #0A0726; --c-nurture-ink: #0A0726; --c-referral-ink: #FFFFFF;
  --track: #242150; --band: #1F6E95;
  --f1: #2E2A85; --f2: #23468F; --f3: #0A7FB0; --f4: #FDA628;
  --shadow: 0 1px 2px #00000040, 0 8px 24px #00000033;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--heading); line-height: 1.12; margin: 0; letter-spacing: -0.01em; }
p { margin: 0 0 0.75em; }
a { color: var(--blue-ink); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.print-only { display: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: 999px;
  font: 600 0.95rem/1.1 var(--font-body); text-decoration: none; cursor: pointer;
  border: 2px solid transparent; transition: transform .12s ease, background-color .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-gold { background: var(--gold); color: #0A0726; }
.btn-gold:hover { background: #FFB648; }
.btn-blue { background: var(--blue); color: #0A0726; }
.btn-blue:hover { background: #3CC0F2; }
.btn-ghost { background: transparent; color: var(--mast-text); border-color: #4A4680; }
.btn-ghost:hover { border-color: var(--blue); }
.btn-plain { background: var(--surface); color: var(--text); border-color: var(--line); }
.btn-plain:hover { border-color: var(--muted); }
.btn-lg { min-height: 54px; padding: 14px 28px; font-size: 1.05rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.tag-est {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--gold-soft); color: var(--gold-ink); font: 700 0.7rem/1.4 var(--font-body);
  letter-spacing: .04em; text-transform: uppercase; vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}