/* tokens.css — design tokens v11
 * Extractie uit docs/mockups/v11.html :root (regels 12-76).
 * Wijzigingen aan deze file = ontwerp-beslissing. Pure waarden, geen logica.
 */

:root {
  /* ──────────────────────────────────────────────
     Backgrounds
     ────────────────────────────────────────────── */
  --bg:           #050814;
  --bg-soft:      #0b1022;
  --bg-softer:    #10162a;
  --bg-card:      #0b1022;
  --bg-card-hover:#10162a;

  /* ──────────────────────────────────────────────
     Logo kleuren (alleen in /Voet4All/-letters)
     ────────────────────────────────────────────── */
  --logo-blue:    #18a0fb;
  --logo-cyan:    #00d4ff;
  --logo-fuchsia: #ff2bd6;
  --logo-orange:  #ff7a18;

  /* ──────────────────────────────────────────────
     Accenten — violet vervangt roze in alle UI;
     fuchsia blijft uitsluitend in logo.
     ────────────────────────────────────────────── */
  --accent:             #18a0fb;
  --accent-soft:        rgba(24, 160, 251, 0.12);
  --accent-cyan:        #00d4ff;
  --accent-violet:      #8b5cf6;
  --accent-violet-soft: rgba(139, 92, 246, 0.12);
  --accent-orange:      #ff7a18;

  --danger:  #ff3366;
  --success: #00d4a0;

  /* Categorie-kleuren — herbruikbaar in sub-hubs (vrouwenvoetbal-pagina,
     supportersclub-listings). Per-card amber/blauw/cyaan/violet blijven inline. */
  --accent-pink:   #f078b0;  /* vrouwenvoetbal */
  --accent-silver: #c4c9dc;  /* supportersclub */

  /* ──────────────────────────────────────────────
     Champagne goud — premium, niet schoolgeel
     gold-bright = active/hover, primaire CTA-tekst, headlines
     gold        = base — eyebrows, badges, default border
     gold-deep   = gradient end-stop, donkerste in linear-gradients
     gold-glow   = box-shadow glow
     gold-soft   = subtiele backgrounds
     ────────────────────────────────────────────── */
  --gold:        #c9a961;
  --gold-bright: #d4af37;
  --gold-deep:   #8c7228;
  --gold-glow:   rgba(212, 175, 55, 0.18);
  --gold-soft:   rgba(201, 169, 97, 0.10);

  /* ──────────────────────────────────────────────
     Glass-effect tokens (v10 base)
     Gebruikt op alle 11 kaartklassen.
     ────────────────────────────────────────────── */
  --glass-card-bg:           rgba(11, 16, 34, 0.55);
  --glass-card-bg-hover:     rgba(16, 22, 42, 0.7);
  --glass-card-border:       rgba(255, 255, 255, 0.08);
  --glass-card-border-hover: rgba(255, 255, 255, 0.14);
  --glass-card-highlight:    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 35%);
  --glass-card-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glass-card-shadow:       0 8px 24px rgba(0, 0, 0, 0.35);
  --glass-card-shadow-hover: 0 14px 38px rgba(0, 0, 0, 0.5);
  --glass-bg:                rgba(11, 16, 34, 0.55);

  /* ──────────────────────────────────────────────
     Borders — generieke randen, los van glass
     ────────────────────────────────────────────── */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border:        rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* ──────────────────────────────────────────────
     Tekst-schaal
     ────────────────────────────────────────────── */
  --text:       #f4f6fc;
  --text-soft:  #c4c9dc;
  --text-muted: #9aa3c1;
  --text-faint: #6e7592;

  /* ──────────────────────────────────────────────
     Shadow-schaal (los van glass)
     ────────────────────────────────────────────── */
  --shadow-soft:   0 18px 45px rgba(0, 0, 0, 0.55);
  --shadow-subtle: 0 8px 24px rgba(0, 0, 0, 0.45);

  /* ──────────────────────────────────────────────
     Radius-schaal
     ────────────────────────────────────────────── */
  --radius:      18px;  /* default — cards, hero */
  --radius-lg:   24px;
  --radius-md:   12px;  /* nested blocks, inputs in cards */
  --radius-sm:   8px;   /* buttons, badges, pills met rechte zijden */
  --radius-pill: 999px;

  /* ──────────────────────────────────────────────
     Typografie
     ────────────────────────────────────────────── */
  --font:         'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ──────────────────────────────────────────────
     Layout
     topbar-h        = sticky offset voor .nav (desktop)
     topbar-h-mobile = idem op viewports waar topbar-inner wrapt
                       en tenant-switcher een eigen rij krijgt
     ────────────────────────────────────────────── */
  --max-width:        1240px;
  --topbar-h:         65px;
  --topbar-h-mobile:  110px;

  /* ──────────────────────────────────────────────
     Sub-stap 3a (5/5/2026) — neon-streep gradient + card-hover-shadow.
     Hergebruikt door .card .premium-card .hero-block via
     public/css/components/shared-cards.css. Bestaande gold/glass-tokens
     ONGEWIJZIGD; dit zijn pure aanvullingen.
     ────────────────────────────────────────────── */
  --neon-streep-gradient:
    linear-gradient(90deg, rgb(64,224,255) 0%, rgb(236,72,153) 50%, rgb(249,115,22) 100%);
  --neon-cyan:    rgb(64, 224, 255);
  --neon-magenta: rgb(236, 72, 153);
  --neon-orange:  rgb(249, 115, 22);

  --card-hover-shadow:
    0 0 24px rgba(212, 175, 55, 0.18),
    inset 0 0 1px rgba(212, 175, 55, 0.32);
  --card-premium-shadow:
    0 0 32px rgba(212, 175, 55, 0.32),
    inset 0 0 1px rgba(212, 175, 55, 0.48);
}