/* ============================================================================
   SURFERONE — DESIGN TOKENS (sub-brand of Mediasurfer)
   Extends the Mediasurfer Design System (Brandbook/Design System/tokens/tokens.css).
   Every colour below is a Mediasurfer primitive unless marked DERIVED.
   Copy of this file ships with the site as site/assets/tokens.css — keep them in sync.
   ============================================================================ */

:root {
  /* --- Mediasurfer primitives (unchanged) -------------------------------- */
  --ms-dark-graphite: #232323;
  --ms-graphite:      #302F2F;
  --ms-white:         #FFFFFF;
  --ms-red:           #E8001C;
  --ms-scarlet:       #F9001E;
  --ms-red-deep:      #C71D00;
  --ms-vibrant-pink:  #FF006B;
  --ms-orange:        #FF6B00;
  --ms-sunflower:     #FFA800;
  --ms-lemon:         #FFD600;
  --ms-wind:          #EEF2F6;
  --ms-wave:          #CCD7DE;
  --ms-rocks:         #8FA6B4;

  /* DERIVED: Rocks darkened for body-size muted text. Rocks on white is ~2.5:1
     and fails WCAG; this is Rocks' hue at 5.6:1. */
  --so-slate:         #56697A;

  /* --- SurferOne channel colours (from the Mediasurfer palette) ----------
     Used for lines, dots and chart series only — never for text on white. */
  --so-ua:   var(--ms-vibrant-pink);  /* User acquisition */
  --so-rtg:  var(--ms-orange);        /* Retargeting */
  --so-ctv:  var(--ms-sunflower);     /* Connected TV */

  /* "One" — the merged line and the "one" in the wordmark. */
  --so-gradient-one: linear-gradient(100deg, #E2001B 5%, #F9001E 45%, #FF6B00 80%, #FFA800 100%);
  /* Icon ("Horizon"): the same stops, bottom to top. */
  --so-gradient-mark: linear-gradient(0deg, #E2001B 5%, #F9001E 45%, #FF6B00 80%, #FFA800 100%);

  /* --- Type ---------------------------------------------------------------
     Stolzl is the brand face but has no web licence for surferone.ai yet.
     Web uses Outfit (free, Google Fonts) — the closest geometric match.
     With a licence: self-host Stolzl WOFF2 and put it first in this stack. */
  --so-font: "Outfit", "Stolzl", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --so-tracking-tight: -0.03em;
  --so-tracking-number: -0.05em;

  --so-text-hero: clamp(2.6rem, 6.4vw, 5.25rem);
  --so-text-h2:   clamp(2rem, 3.6vw, 3rem);
  --so-text-h3:   1.375rem;
  --so-text-lg:   1.1875rem;
  --so-text-base: 1rem;
  --so-text-sm:   0.875rem;

  /* --- Shape (Mediasurfer: pill buttons, 24–32px cards) ------------------ */
  --so-radius-pill: 999px;
  --so-radius-lg:   24px;
  --so-radius-xl:   32px;

  /* --- Semantic: light (default) ----------------------------------------- */
  --color-bg:         var(--ms-white);
  --color-bg-subtle:  var(--ms-wind);
  --color-surface:    var(--ms-white);
  --color-border:     var(--ms-wave);
  --color-text:       var(--ms-dark-graphite);
  --color-text-muted: var(--so-slate);
  --color-heading:    var(--ms-dark-graphite);
  --color-accent:     var(--ms-red);
  --color-accent-hover: var(--ms-red-deep);
  --color-on-accent:  var(--ms-white);
  /* The "engine" band is dark in both themes. */
  --color-band:       var(--ms-dark-graphite);
  --color-band-2:     var(--ms-graphite);
  --color-on-band:    var(--ms-white);
  --color-on-band-muted: #B7C5CE;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:         var(--ms-dark-graphite);
    --color-bg-subtle:  var(--ms-graphite);
    --color-surface:    var(--ms-graphite);
    --color-border:     rgba(255,255,255,0.14);
    --color-text:       var(--ms-white);
    --color-text-muted: #B7C5CE;
    --color-heading:    var(--ms-white);
    --color-accent:     var(--ms-red);
    --color-accent-hover: var(--ms-red-deep);
    --color-band:       #1A1A1A;
    --color-band-2:     var(--ms-graphite);
  }
}
:root[data-theme="dark"] {
  --color-bg:         var(--ms-dark-graphite);
  --color-bg-subtle:  var(--ms-graphite);
  --color-surface:    var(--ms-graphite);
  --color-border:     rgba(255,255,255,0.14);
  --color-text:       var(--ms-white);
  --color-text-muted: #B7C5CE;
  --color-heading:    var(--ms-white);
  --color-accent:     var(--ms-red);
  --color-accent-hover: var(--ms-red-deep);
  --color-band:       #1A1A1A;
  --color-band-2:     var(--ms-graphite);
}