/* =============================================================================
   RADIONL — DESIGN TOKENS
   The palette from the RADIONL huisstijlhandboek, kleurenhoofdstuk v1.0.

   These are the brand's colours, not suggestions. The handbook is explicit that
   the primaries are never lightened, darkened or made transparent by hand — the
   hover and active blues below are the named steps from the chapter, not a
   filter applied to --color-blue.

   The recommended balance is roughly 50% white, 25% light blue, 12% dark blue,
   9% brand blue and 4% red. That is why red appears here only as an accent and
   is used for exactly three things in the components: LIVE state, the primary
   call to action, and the label above a sidebar panel.
   ========================================================================== */

:root {
  /* ── Primary ──────────────────────────────────────────────────────────── */
  --color-red:          #dd0b18;  /* Accent: primary CTA, LIVE, urgent */
  --color-red-bright:   #f33644;  /* Only as the far end of the Live gradient */
  --color-blue:         #0a5fcc;  /* Merkdrager: navigation, links, icons */
  --color-white:        #ffffff;

  /* ── Secondary ────────────────────────────────────────────────────────── */
  --color-navy:         #12345b;  /* Donkerblauw: headers, footers */
  --color-steel:        #365c8a;  /* Staalblauw: icons, charts */
  --color-mist:         #dce8fa;  /* Mistblauw: backgrounds */
  --color-ice:          #edf4ff;  /* IJsblauw: content surfaces */

  /* ── Neutral ──────────────────────────────────────────────────────────── */
  --color-ink:          #1b2430;  /* Antraciet: body copy */
  --color-ink-soft:     #49566c;  /* Donkergrijs: secondary copy */
  --color-border:       #d9e2f2;  /* Lichtgrijs: borders */
  --color-divider:      #e8eef8;  /* Extra licht: dividers */

  /* ── Functional ───────────────────────────────────────────────────────── */
  --color-success:      #2dbe8a;
  --color-warning:      #f4a000;
  --color-error:        #dd0b18;
  --color-info:         #0a5fcc;

  /* ── Digital UI ───────────────────────────────────────────────────────── */
  --color-page:         #f4f7fe;
  --color-card:         #ffffff;
  --color-surface:      #edf4ff;
  --color-blue-hover:   #084fb0;
  --color-blue-active:  #073d8a;
  --color-placeholder:  #7d8796;

  /* ── Gradients ────────────────────────────────────────────────────────── */
  /* One per component, and only in digital work. */
  --gradient-brand:     linear-gradient(135deg, #0a5fcc 0%, #3a84e8 55%, #8fc5ff 100%);
  --gradient-blue:      linear-gradient(135deg, #0a5fcc 0%, #2e86ff 100%);
  --gradient-surface:   linear-gradient(180deg, #ffffff 0%, #edf4ff 100%);
  --gradient-soft:      linear-gradient(135deg, #edf4ff 0%, #dce8fa 100%);
  --gradient-deep:      linear-gradient(135deg, #12345b 0%, #0a5fcc 100%);
  --gradient-live:      linear-gradient(90deg, #dd0b18 0%, #f33644 100%);
  --gradient-glass:     linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(244,247,254,.95) 100%);

  /* ── Overlays ─────────────────────────────────────────────────────────── */
  --overlay-dark:       rgba(18, 52, 91, .75);
  --overlay-blue:       rgba(10, 95, 204, .60);
  --overlay-light:      rgba(255, 255, 255, .82);

  /* ── Elevation ────────────────────────────────────────────────────────── */
  --shadow-light:       0 6px 20px rgba(18, 52, 91, .08);
  --shadow-medium:      0 12px 40px rgba(18, 52, 91, .12);
  --shadow-heavy:       0 24px 60px rgba(18, 52, 91, .18);

  /* Glow is hover, focus and active media only — never decoration. */
  --glow-blue:          0 0 0 4px rgba(10, 95, 204, .18);
  --glow-red:           0 0 0 4px rgba(221, 11, 24, .18);
  --glow-white:         0 0 0 4px rgba(255, 255, 255, .30);

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font-body: "Figtree", "Figtree Fallback", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-body);
  --font-hand: "Caveat", cursive;

  /* ── Shape & rhythm ───────────────────────────────────────────────────── */
  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  --gap: 16px;
  --gap-sm: 10px;
  --gap-lg: 24px;

  --container: 1400px;
  --rail-width: 420px;
  --header-height: 76px;
}