/* ============================================================
   Bitkoning Master Brand — Colors
   Anchors, afgeleide ladders (tint/edge/glow), ink-schaal, muted, on-colors, semantische aliases.
   Gegenereerd uit het master brand guidelines document (v2.0).
   Productie-bron. De master HTML demonstreert deze classes inline.
   ============================================================ */

:root {
  --bk-ink-0: #0A0A0A;
  --bk-ink-1: #161616;
  --bk-ink-2: #242424;
  --bk-ink-3: #333333;
  --bk-ink-4: #4D4D4D;
  --bk-ink-5: #7A7A7A;
  --bk-ink-6: #A4A4A4;
  --bk-ink-7: #CECECE;
  --bk-ink-8: #F5F5F5;
  --bk-green-glow: #C8FFCE;
  --bk-green-hover: #9FFFAC;
  --bk-green-base: #00FF66;
  --bk-green-pressed: #00D955;
  --bk-green-deep: #00A23E;
  --bk-gold-glow: #FFECCC;
  --bk-gold-hover: #FFD285;
  --bk-gold-base: #FFB800;
  --bk-gold-pressed: #D79A00;
  --bk-gold-deep: #9E7000;
  --bk-red-glow: #FF9D91;
  --bk-red-hover: #FF675A;
  --bk-red-base: #FF2B2B;
  --bk-red-pressed: #D30011;
  --bk-red-deep: #880006;
  --bk-blue-glow: #84B0FA;
  --bk-blue-hover: #4F90FF;
  --bk-blue-base: #2979FF;
  --bk-blue-pressed: #095AD6;
  --bk-blue-deep: #00338A;
  /* Muted — de zesde solide ladder-stap: dezelfde lightness en hue als base,
     maar chroma teruggebracht naar ~30% (base-chroma × 0.30 in OKLCH).
     Gedesatureerd, niet verdonkerd: leest als "dezelfde categorie, inactief/secundair"
     voor disabled states, inactive tabs, en niet-actieve indicators. Hex hieronder is de
     gerenderde uitkomst van die OKLCH-afleiding (zie §9 voor de regel).
     green: oklch(.872 .076 147.6) · gold: oklch(.827 .051 80.5)
     red: oklch(.643 .073 27.5) · blue: oklch(.606 .064 260.4) */
  --bk-green-muted: #B4E3B9;
  --bk-gold-muted: #D8C4A1;
  --bk-red-muted: #B57C75;
  --bk-blue-muted: #6C83A9;
  /* "On-color" tekst — leesbare voorgrond op een vol-gekleurde surface.
     Een groene knop heeft een groene base als background; op-die-bg moet de tekst hyper-leesbaar zijn.
     Bitkoning kiest geen wit hier (te helder, "schreeuwt" op een neon-groen vlak) maar een dark-deep
     versie van dezelfde hue — perceptueel rustig, semantisch verbonden, leesbaar. Eén token per hue. */
  --bk-on-green: #0A2814;
  /* dark deep-green: tekst op .bk-btn-primary, on green-base CTAs */
  --bk-on-gold: #3D2800;
  /* dark deep-gold: tekst op .bk-btn-attention, on gold-base CTAs */
  --bk-on-red: #FFFFFF;
  /* wit op rood: rood is al donker-saturatie, wit leest hier wel rustig */
  --bk-on-blue: #FFFFFF;
  /* wit op blauw: zelfde logica als rood */
  --bk-on-green-track: rgba(10, 40, 20, 0.25);
  --bk-on-gold-track: rgba(61, 40, 0, 0.25);
  /* Semantische aliases — intentie-laag bovenop de solid base-kleuren (zie §11.1).
     App-code gebruikt var(--bk-urgent) i.p.v. var(--bk-red-base) om bedoeling te documenteren;
     als de brand ooit van anchor wisselt, wordt alleen de pointer hier herschreven. */
  --bk-success: var(--bk-green-base);
  /* positieve bevestiging, primary action */
  --bk-attention: var(--bk-gold-base);
  /* let-op, waarschuwing (niet-destructief) */
  --bk-urgent: var(--bk-red-base);
  /* LIVE, alerts, destructive actions */
  --bk-green-tint-1: color-mix(in oklch, #00FF66  4%, transparent);
  --bk-green-tint-2: color-mix(in oklch, #00FF66  6%, transparent);
  --bk-green-tint-3: color-mix(in oklch, #00FF66 10%, transparent);
  --bk-green-tint-4: color-mix(in oklch, #00FF66 15%, transparent);
  --bk-green-tint-5: color-mix(in oklch, #00FF66 25%, transparent);
  --bk-gold-tint-1: color-mix(in oklch, #FFB800  4%, transparent);
  --bk-gold-tint-2: color-mix(in oklch, #FFB800  6%, transparent);
  --bk-gold-tint-3: color-mix(in oklch, #FFB800 10%, transparent);
  --bk-gold-tint-4: color-mix(in oklch, #FFB800 15%, transparent);
  --bk-gold-tint-5: color-mix(in oklch, #FFB800 25%, transparent);
  --bk-red-tint-1: color-mix(in oklch, #FF2B2B  4%, transparent);
  --bk-red-tint-2: color-mix(in oklch, #FF2B2B  6%, transparent);
  --bk-red-tint-3: color-mix(in oklch, #FF2B2B 10%, transparent);
  --bk-red-tint-4: color-mix(in oklch, #FF2B2B 15%, transparent);
  --bk-red-tint-5: color-mix(in oklch, #FF2B2B 25%, transparent);
  --bk-blue-tint-1: color-mix(in oklch, #2979FF  4%, transparent);
  --bk-blue-tint-2: color-mix(in oklch, #2979FF  6%, transparent);
  --bk-blue-tint-3: color-mix(in oklch, #2979FF 10%, transparent);
  --bk-blue-tint-4: color-mix(in oklch, #2979FF 15%, transparent);
  --bk-blue-tint-5: color-mix(in oklch, #2979FF 25%, transparent);
  /* Tier 2 — Border accents (transparant, voor border-emphasis bij alerts, callouts, pills, halo's)
     Vier stappen: subtle → standard → strong → focus-emphasis. Zie §9 Border accents sub-secties. */
  --bk-green-edge-1: color-mix(in oklch, #00FF66 20%, transparent);
  --bk-green-edge-2: color-mix(in oklch, #00FF66 30%, transparent);
  --bk-green-edge-3: color-mix(in oklch, #00FF66 45%, transparent);
  --bk-green-edge-4: color-mix(in oklch, #00FF66 70%, transparent);
  --bk-gold-edge-1: color-mix(in oklch, #FFB800 20%, transparent);
  --bk-gold-edge-2: color-mix(in oklch, #FFB800 30%, transparent);
  --bk-gold-edge-3: color-mix(in oklch, #FFB800 45%, transparent);
  --bk-gold-edge-4: color-mix(in oklch, #FFB800 70%, transparent);
  --bk-red-edge-1: color-mix(in oklch, #FF2B2B 20%, transparent);
  --bk-red-edge-2: color-mix(in oklch, #FF2B2B 30%, transparent);
  --bk-red-edge-3: color-mix(in oklch, #FF2B2B 45%, transparent);
  --bk-red-edge-4: color-mix(in oklch, #FF2B2B 70%, transparent);
  --bk-blue-edge-1: color-mix(in oklch, #2979FF 20%, transparent);
  --bk-blue-edge-2: color-mix(in oklch, #2979FF 30%, transparent);
  --bk-blue-edge-3: color-mix(in oklch, #2979FF 45%, transparent);
  --bk-blue-edge-4: color-mix(in oklch, #2979FF 70%, transparent);
  /* Tier 2 — Halo glows (transparant, voor box-shadow lichtbron-effecten)
     Vier stappen voor compositie-paren: dual-halo's gebruiken een outer (lager %) en inner (hoger %)
     gestapeld voor de "diffuse + dichte kern"-leesbaarheid. Zie §9 Halo sub-secties. */
  --bk-green-halo-1: color-mix(in oklch, #00FF66 15%, transparent);
  --bk-green-halo-2: color-mix(in oklch, #00FF66 30%, transparent);
  --bk-green-halo-3: color-mix(in oklch, #00FF66 50%, transparent);
  --bk-green-halo-4: color-mix(in oklch, #00FF66 70%, transparent);
  --bk-gold-halo-1: color-mix(in oklch, #FFB800 15%, transparent);
  --bk-gold-halo-2: color-mix(in oklch, #FFB800 30%, transparent);
  --bk-gold-halo-3: color-mix(in oklch, #FFB800 50%, transparent);
  --bk-gold-halo-4: color-mix(in oklch, #FFB800 70%, transparent);
  --bk-red-halo-1: color-mix(in oklch, #FF2B2B 15%, transparent);
  --bk-red-halo-2: color-mix(in oklch, #FF2B2B 30%, transparent);
  --bk-red-halo-3: color-mix(in oklch, #FF2B2B 50%, transparent);
  --bk-red-halo-4: color-mix(in oklch, #FF2B2B 70%, transparent);
  --bk-blue-halo-1: color-mix(in oklch, #2979FF 15%, transparent);
  --bk-blue-halo-2: color-mix(in oklch, #2979FF 30%, transparent);
  --bk-blue-halo-3: color-mix(in oklch, #2979FF 50%, transparent);
  --bk-blue-halo-4: color-mix(in oklch, #2979FF 70%, transparent);
  /* Tier 3 — Achromatische overlays (transparant wit/zwart, voor surface-depth zonder kleur-claim)
     White: sublime top-light, soft border, hover-lift. Shadow: card-depth, modal shroud, page backdrop.
     Zie §10 Light overlays en §10 Shadow overlays sub-secties. */
  --bk-light-1: rgba(255, 255, 255, 0.04);
  /* subtle border op ink-0/ink-1 surface */
  --bk-light-2: rgba(255, 255, 255, 0.06);
  /* default white-on-dark border */
  --bk-light-3: rgba(255, 255, 255, 0.08);
  /* inset top-edge highlight (card lift) */
  --bk-light-4: rgba(255, 255, 255, 0.10);
  /* hover top-edge intensivering */
  --bk-light-5: rgba(255, 255, 255, 0.15);
  /* secondary button hover-glow inner */
  --bk-light-flash: rgba(255, 255, 255, 0.50);
  /* Light-glow — wit-text-shadow voor achromatic "neon text" effect (parallel aan halo-3/halo-4 voor
     chromatische tekst-glows). Twee stappen voor dual-text-shadow compositie:
     inner (sharp, 4px blur) en outer (diffuse, 8px blur). */
  --bk-light-glow-inner: rgba(255, 255, 255, 0.60);
  /* sharp inner ring, 4px blur */
  --bk-light-glow-outer: rgba(255, 255, 255, 0.30);
  /* diffuse outer ring, 8px blur */
  --bk-shadow-1: rgba(0, 0, 0, 0.30);
  /* subtle card drop-shadow */
  --bk-shadow-2: rgba(0, 0, 0, 0.40);
  /* inset bottom-edge card depth */
  --bk-shadow-3: rgba(0, 0, 0, 0.50);
  /* modal box-shadow (floating depth) */
  --bk-shadow-4: rgba(0, 0, 0, 0.55);
}

@supports not (color: color-mix(in oklch, red 50%, transparent)) {
  :root {
    --bk-green-tint-1: color-mix(in srgb, #00FF66  4%, transparent);
    --bk-green-tint-2: color-mix(in srgb, #00FF66  6%, transparent);
    --bk-green-tint-3: color-mix(in srgb, #00FF66 10%, transparent);
    --bk-green-tint-4: color-mix(in srgb, #00FF66 15%, transparent);
    --bk-green-tint-5: color-mix(in srgb, #00FF66 25%, transparent);

    --bk-gold-tint-1:  color-mix(in srgb, #FFB800  4%, transparent);
    --bk-gold-tint-2:  color-mix(in srgb, #FFB800  6%, transparent);
    --bk-gold-tint-3:  color-mix(in srgb, #FFB800 10%, transparent);
    --bk-gold-tint-4:  color-mix(in srgb, #FFB800 15%, transparent);
    --bk-gold-tint-5:  color-mix(in srgb, #FFB800 25%, transparent);

    --bk-red-tint-1:   color-mix(in srgb, #FF2B2B  4%, transparent);
    --bk-red-tint-2:   color-mix(in srgb, #FF2B2B  6%, transparent);
    --bk-red-tint-3:   color-mix(in srgb, #FF2B2B 10%, transparent);
    --bk-red-tint-4:   color-mix(in srgb, #FF2B2B 15%, transparent);
    --bk-red-tint-5:   color-mix(in srgb, #FF2B2B 25%, transparent);

    --bk-blue-tint-1:  color-mix(in srgb, #2979FF  4%, transparent);
    --bk-blue-tint-2:  color-mix(in srgb, #2979FF  6%, transparent);
    --bk-blue-tint-3:  color-mix(in srgb, #2979FF 10%, transparent);
    --bk-blue-tint-4:  color-mix(in srgb, #2979FF 15%, transparent);
    --bk-blue-tint-5:  color-mix(in srgb, #2979FF 25%, transparent);

    --bk-green-edge-1: color-mix(in srgb, #00FF66 20%, transparent);
    --bk-green-edge-2: color-mix(in srgb, #00FF66 30%, transparent);
    --bk-green-edge-3: color-mix(in srgb, #00FF66 45%, transparent);
    --bk-green-edge-4: color-mix(in srgb, #00FF66 70%, transparent);
    --bk-gold-edge-1:  color-mix(in srgb, #FFB800 20%, transparent);
    --bk-gold-edge-2:  color-mix(in srgb, #FFB800 30%, transparent);
    --bk-gold-edge-3:  color-mix(in srgb, #FFB800 45%, transparent);
    --bk-gold-edge-4:  color-mix(in srgb, #FFB800 70%, transparent);
    --bk-red-edge-1:   color-mix(in srgb, #FF2B2B 20%, transparent);
    --bk-red-edge-2:   color-mix(in srgb, #FF2B2B 30%, transparent);
    --bk-red-edge-3:   color-mix(in srgb, #FF2B2B 45%, transparent);
    --bk-red-edge-4:   color-mix(in srgb, #FF2B2B 70%, transparent);
    --bk-blue-edge-1:  color-mix(in srgb, #2979FF 20%, transparent);
    --bk-blue-edge-2:  color-mix(in srgb, #2979FF 30%, transparent);
    --bk-blue-edge-3:  color-mix(in srgb, #2979FF 45%, transparent);
    --bk-blue-edge-4:  color-mix(in srgb, #2979FF 70%, transparent);

    --bk-green-halo-1: color-mix(in srgb, #00FF66 15%, transparent);
    --bk-green-halo-2: color-mix(in srgb, #00FF66 30%, transparent);
    --bk-green-halo-3: color-mix(in srgb, #00FF66 50%, transparent);
    --bk-green-halo-4: color-mix(in srgb, #00FF66 70%, transparent);
    --bk-gold-halo-1:  color-mix(in srgb, #FFB800 15%, transparent);
    --bk-gold-halo-2:  color-mix(in srgb, #FFB800 30%, transparent);
    --bk-gold-halo-3:  color-mix(in srgb, #FFB800 50%, transparent);
    --bk-gold-halo-4:  color-mix(in srgb, #FFB800 70%, transparent);
    --bk-red-halo-1:   color-mix(in srgb, #FF2B2B 15%, transparent);
    --bk-red-halo-2:   color-mix(in srgb, #FF2B2B 30%, transparent);
    --bk-red-halo-3:   color-mix(in srgb, #FF2B2B 50%, transparent);
    --bk-red-halo-4:   color-mix(in srgb, #FF2B2B 70%, transparent);
    --bk-blue-halo-1:  color-mix(in srgb, #2979FF 15%, transparent);
    --bk-blue-halo-2:  color-mix(in srgb, #2979FF 30%, transparent);
    --bk-blue-halo-3:  color-mix(in srgb, #2979FF 50%, transparent);
    --bk-blue-halo-4:  color-mix(in srgb, #2979FF 70%, transparent);

    /* Achromatische overlays — rgba-native, geen color-mix nodig, hier voor systeem-consistentie herhaald. */
    --bk-light-1: rgba(255, 255, 255, 0.04);
    --bk-light-2: rgba(255, 255, 255, 0.06);
    --bk-light-3: rgba(255, 255, 255, 0.08);
    --bk-light-4: rgba(255, 255, 255, 0.10);
    --bk-light-5: rgba(255, 255, 255, 0.15);
    --bk-light-flash: rgba(255, 255, 255, 0.50);
    --bk-light-glow-inner: rgba(255, 255, 255, 0.60);
    --bk-light-glow-outer: rgba(255, 255, 255, 0.30);
    --bk-shadow-1: rgba(0, 0, 0, 0.30);
    --bk-shadow-2: rgba(0, 0, 0, 0.40);
    --bk-shadow-3: rgba(0, 0, 0, 0.50);
    --bk-shadow-4: rgba(0, 0, 0, 0.55);
  }
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  :root {
    --bk-green-tint-1: rgba(0,255,102, 0.04);
    --bk-green-tint-2: rgba(0,255,102, 0.06);
    --bk-green-tint-3: rgba(0,255,102, 0.10);
    --bk-green-tint-4: rgba(0,255,102, 0.15);
    --bk-green-tint-5: rgba(0,255,102, 0.25);
    --bk-gold-tint-1:  rgba(255,184,0, 0.04);
    --bk-gold-tint-2:  rgba(255,184,0, 0.06);
    --bk-gold-tint-3:  rgba(255,184,0, 0.10);
    --bk-gold-tint-4:  rgba(255,184,0, 0.15);
    --bk-gold-tint-5:  rgba(255,184,0, 0.25);
    --bk-red-tint-1:   rgba(255,43,43,  0.04);
    --bk-red-tint-2:   rgba(255,43,43,  0.06);
    --bk-red-tint-3:   rgba(255,43,43,  0.10);
    --bk-red-tint-4:   rgba(255,43,43,  0.15);
    --bk-red-tint-5:   rgba(255,43,43,  0.25);
    --bk-blue-tint-1:  rgba(41,121,255, 0.04);
    --bk-blue-tint-2:  rgba(41,121,255, 0.06);
    --bk-blue-tint-3:  rgba(41,121,255, 0.10);
    --bk-blue-tint-4:  rgba(41,121,255, 0.15);
    --bk-blue-tint-5:  rgba(41,121,255, 0.25);

    --bk-green-edge-1: rgba(0,255,102, 0.20);
    --bk-green-edge-2: rgba(0,255,102, 0.30);
    --bk-green-edge-3: rgba(0,255,102, 0.45);
    --bk-green-edge-4: rgba(0,255,102, 0.70);
    --bk-gold-edge-1:  rgba(255,184,0, 0.20);
    --bk-gold-edge-2:  rgba(255,184,0, 0.30);
    --bk-gold-edge-3:  rgba(255,184,0, 0.45);
    --bk-gold-edge-4:  rgba(255,184,0, 0.70);
    --bk-red-edge-1:   rgba(255,43,43,  0.20);
    --bk-red-edge-2:   rgba(255,43,43,  0.30);
    --bk-red-edge-3:   rgba(255,43,43,  0.45);
    --bk-red-edge-4:   rgba(255,43,43,  0.70);
    --bk-blue-edge-1:  rgba(41,121,255, 0.20);
    --bk-blue-edge-2:  rgba(41,121,255, 0.30);
    --bk-blue-edge-3:  rgba(41,121,255, 0.45);
    --bk-blue-edge-4:  rgba(41,121,255, 0.70);

    --bk-green-halo-1: rgba(0,255,102, 0.15);
    --bk-green-halo-2: rgba(0,255,102, 0.30);
    --bk-green-halo-3: rgba(0,255,102, 0.50);
    --bk-green-halo-4: rgba(0,255,102, 0.70);
    --bk-gold-halo-1:  rgba(255,184,0, 0.15);
    --bk-gold-halo-2:  rgba(255,184,0, 0.30);
    --bk-gold-halo-3:  rgba(255,184,0, 0.50);
    --bk-gold-halo-4:  rgba(255,184,0, 0.70);
    --bk-red-halo-1:   rgba(255,43,43,  0.15);
    --bk-red-halo-2:   rgba(255,43,43,  0.30);
    --bk-red-halo-3:   rgba(255,43,43,  0.50);
    --bk-red-halo-4:   rgba(255,43,43,  0.70);
    --bk-blue-halo-1:  rgba(41,121,255, 0.15);
    --bk-blue-halo-2:  rgba(41,121,255, 0.30);
    --bk-blue-halo-3:  rgba(41,121,255, 0.50);
    --bk-blue-halo-4:  rgba(41,121,255, 0.70);

    --bk-light-1: rgba(255, 255, 255, 0.04);
    --bk-light-2: rgba(255, 255, 255, 0.06);
    --bk-light-3: rgba(255, 255, 255, 0.08);
    --bk-light-4: rgba(255, 255, 255, 0.10);
    --bk-light-5: rgba(255, 255, 255, 0.15);
    --bk-light-flash: rgba(255, 255, 255, 0.50);
    --bk-light-glow-inner: rgba(255, 255, 255, 0.60);
    --bk-light-glow-outer: rgba(255, 255, 255, 0.30);
    --bk-shadow-1: rgba(0, 0, 0, 0.30);
    --bk-shadow-2: rgba(0, 0, 0, 0.40);
    --bk-shadow-3: rgba(0, 0, 0, 0.50);
    --bk-shadow-4: rgba(0, 0, 0, 0.55);
  }
}

/* Color utilities */
.bk-glow-red    { box-shadow: 0 0 24px var(--bk-red-halo-3), 0 0 8px var(--bk-red-base); }

.bk-glow-green  { box-shadow: 0 0 24px var(--bk-green-halo-3), 0 0 8px var(--bk-green-base); }

.bk-glow-gold   { box-shadow: 0 0 24px var(--bk-gold-halo-3), 0 0 8px var(--bk-gold-base); }

/* Logo-art hook-classes (.bk-art / -h / -v / -s) — gebruikt op de inline logo-SVG's.
   Basis: block-level. Concrete afmetingen zijn context-afhankelijk (zie de
   logo-secties §39–§43 en de inline demonstraties in het master-document). */
.bk-art,
.bk-art-h,
.bk-art-v,
.bk-art-s { display: block; }