/* ============================================================
   SCORR 2.0 — Design Tokens · Marker: SCORR_STYLING_v1
   Bron: SCORR brand-identity
   ------------------------------------------------------------
   CANONIEK (brand-fundament, 2026-06-03):
   - App-achtergrond = Deep Navy  --scorr-deep  #0A0E27
   - #07091C blijft als --scorr-deeper, ALLEEN als subtiele
     accent-tint (bv. inputs/diepe kaarten), niet als pagina-bg.
   - Elke pagina: scorr_head() gebruiken + body.scorr-themed,
     kleuren via var(--scorr-*) — geen hardcoded hex.
   ============================================================ */

:root {
  /* Primaire merkkleuren (1:1 uit 1.0) */
  --scorr-electric:      #00FF88;
  --scorr-electric-dim:  #00CC6A;
  --scorr-deep:          #0A0E27;
  --scorr-slate:         #1E2749;
  --scorr-accent:        #FF3D71;
  --scorr-warning:       #FFB800;
  --scorr-cloud:         #F5F7FA;
  --scorr-cyan:          #00DDFF;
  --scorr-card:          #FFFFFF;

  /* Aanvullende tinten (behoud uit 2.0) */
  --scorr-deeper:        #07091C;
  --scorr-slate-light:   #2A3460;
  --scorr-slate-soft:    #4A5880;
  --scorr-text-muted:    #8899BB;
  --scorr-text-dim:      #5d6da3;
  --scorr-text-faint:    #94a3b8;
  --scorr-text-bright:   #F0F4FF;

  /* Status */
  --scorr-success:       #00FF88;
  --scorr-danger:        #FF3D71;
  --scorr-info:          #00DDFF;

  /* Backwards-compat aliassen */
  --g:        var(--scorr-electric);
  --dg:       var(--scorr-electric-dim);
  --n:        var(--scorr-deep);   /* canoniek: brand navy #0A0E27 (was #07091C) */
  --nm:       var(--scorr-deep);
  --nk:       var(--scorr-slate);
  --rose:     var(--scorr-accent);
  --green:    var(--scorr-electric);
  --navy:     var(--scorr-deep);
  --navy-mid: var(--scorr-slate);
  --navy-light: var(--scorr-slate-light);

  /* Typography */
  --scorr-font:          'Lexend', system-ui, -apple-system, sans-serif;
  --scorr-font-mono:     ui-monospace, 'SF Mono', Menlo, monospace;
  --scorr-fw-thin:       300;
  --scorr-fw-normal:     400;
  --scorr-fw-medium:     500;
  --scorr-fw-semibold:   600;
  --scorr-fw-bold:       700;
  --scorr-fw-black:      900;
  --scorr-letter-tight:  -2px;
  --scorr-letter-normal: -1px;
  --scorr-letter-wide:   2px;

  /* Spacing / Radii / Shadows */
  --scorr-radius-sm:     6px;
  --scorr-radius-md:     10px;
  --scorr-radius-lg:     14px;
  --scorr-radius-xl:     20px;
  --scorr-radius-pill:   999px;
  --scorr-shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.15);
  --scorr-shadow-md:     0 4px 16px rgba(0, 0, 0, 0.25);
  --scorr-shadow-glow:   0 0 24px rgba(0, 255, 136, 0.3);

  /* Transitions */
  --scorr-trans-fast:    .15s ease;
  --scorr-trans-normal:  .25s ease;
  --scorr-trans-slow:    .4s ease;
}

body.scorr-themed {
  background: var(--scorr-deep);
  color: var(--scorr-text-bright);
  font-family: var(--scorr-font);
}

::selection { background: var(--scorr-electric); color: var(--scorr-deep); }