/**
 * Bondgenoot — tokens.css
 * =================================================================
 * /assets/css/tokens.css
 *
 * v1 (A6 F030)     — initiële token-set.
 * v2 (C2 F056)     — "warmer perkament" re-thema.
 * v3 (FIX-CL-UI-A) — UITBREIDING: button/input/card/type-scale + premium-alias.
 *
 * Visuele richting:
 *   - Warme houtbruin/perkament-basis (TribalWars-vibe).
 *   - Donker = buitenmuur/burcht; crème = inhoudsdrager.
 *   - Goud is gedempt-koninklijk, niet citroen.
 *   - Inkt-zwart op perkament voor body-tekst — boekgevoel.
 *
 * Filosofie (kernregel):
 *   GEEN hex-codes elders in CSS — overal var(--name).
 *   Foundation-classes (.bg-btn/.bg-card/.bg-input/...) gebruiken
 *   ALLEEN deze tokens. Page-CSS migreert geleidelijk via UI-audit.
 *
 * Tokens zijn cumulatief: oude namen blijven werken (alias of identiek)
 * zodat oudere page-CSS niet hoeft te wijzigen.
 *
 * Donker-only — geen light-theme override op MVP. Premium-theme
 * (themes/premium.css) is scoped onder body.premium-active.
 */
:root {
  /* ============ HOOFDKLEUREN — donker (buitenmuur) ============ */
  --bg-deepest:    #0F0703;
  --bg-deep:       #1A0E06;
  --bg-darkest:    #0F0703;   /* alias */
  --bg-dark:       #1A0E06;   /* alias */

  --bg-header:     #14090A;
  --bg-footer:     #14090A;
  --bg-elev:       #261607;
  --bg-panel:      #1F1208;

  /* ============ HOOFDKLEUREN — perkament (binnenmuur) ============ */
  --bg-parchment-1: #EFDFB4;
  --bg-parchment-2: #E2CD93;
  --bg-parchment-3: #C9B17A;
  --bg-parchment:   #E5D29B;
  --bg-parchment-dark: #B89A60;
  --bg-creme:       #ECDCAA;
  --bg-beheer:      #20150B;
  --bg-beheer-card: #2A1A10;

  --parchment-stain:      rgba(140, 100, 50, 0.12);
  --parchment-stain-dark: rgba(110,  75, 35, 0.18);

  --border-parchment-strong: rgba(140, 103, 34, 0.55);

  /* ============ ACCENT — goud / brons ============ */
  --gold-deep:      #8C6722;
  --gold:           #B8893D;
  --gold-soft:      #C49C5A;
  --gold-bright:    #D4A656;
  --gold-pale:      #ECC473;

  /* Backwards-compat aliases */
  --accent-bronze:        var(--gold);
  --accent-bronze-light:  var(--gold-soft);
  --accent-gold:          var(--gold-bright);
  --accent-gold-light:    var(--gold-pale);
  --accent-bordeaux:      #8B2D2D;
  --accent-bordeaux-light:#A84444;
  --accent-ink:           #1A1410;
  --accent-ink-fade:      #4A3A2A;

  /* Premium-gold (P3 F465 had eigen private set; nu alias op --gold-*) */
  --premium-gold-1: var(--gold-pale);
  --premium-gold-2: var(--gold);
  --premium-gold-3: var(--gold-deep);

  /* ============ TEKST ============ */
  --text-on-dark:           #F4E5C2;
  --text-on-dark-muted:     #C8B994;
  --text-on-dark-faint:     #8E7E5A;
  --text-on-dark-disabled:  #5C4F3A;

  --text-on-parchment:        #2C1F0A;
  --text-on-parchment-muted:  #6B4F2A;
  --text-on-parchment-faint:  #8E7548;

  --text-primary:  var(--text-on-dark);
  --text-muted:    var(--text-on-dark-muted);
  --text:          var(--text-on-dark);

  /* Pure helpers */
  --color-white:   #FFFFFF;
  --color-black:   #000000;

  /* ============ STATUS ============ */
  --status-success: #6B9F4D;
  --status-warning: #C68A2B;
  --status-error:   #B23B3B;
  --status-info:    #4F7CA3;

  /* Soft variants for backgrounds (alerts/badges) */
  --status-success-soft: rgba(107, 159, 77, 0.16);
  --status-warning-soft: rgba(198, 138, 43, 0.16);
  --status-error-soft:   rgba(178, 59, 59, 0.16);
  --status-info-soft:    rgba(79, 124, 163, 0.16);

  --color-success: var(--status-success);
  --color-warning: var(--status-warning);
  --color-error:   var(--status-error);
  --color-info:    var(--status-info);

  /* ============ BORDERS ============ */
  --border:           #4A3825;
  --border-strong:    #5E4830;
  --border-gold:      var(--gold-deep);
  --border-parchment: rgba(184, 137, 61, 0.40);
  --border-subtle:    #3A2A18;

  /* ============ KAART (cluster D) — preserved ============ */
  --map-glow-own:    rgba(212,162, 76,0.50);
  --map-glow-ally:   rgba( 64,200,220,0.40);
  --map-glow-alliance: rgba( 80,220,140,0.40);
  --map-glow-nap:    rgba( 80,150,220,0.35);
  --map-glow-enemy:  rgba(255, 80, 80,0.45);
  --map-glow-sacred: rgba(180,100,220,0.40);

  /* ============ GLOWS GEBOUW (cluster H) — preserved ============ */
  --glow-construction: rgba(255,200,100,0.35);
  --glow-training:     rgba(100,200,255,0.30);
  --glow-damaged:      rgba(255, 60, 60,0.40);
  --glow-incoming:     rgba(255, 60, 60,0.60);

  /* ============ PARTICLES — preserved ============ */
  --particle-dust:  rgba(180,160,130,0.6);
  --particle-spark: rgba(255,220,100,0.8);
  --particle-smoke: rgba( 80, 80, 80,0.4);

  /* ============ SPACING (4px-grid) ============ */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ============ RADIUS ============ */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* ============ SHADOWS ============ */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.25);
  --shadow-md:    0 3px 10px rgba(0,0,0,0.32);
  --shadow-lg:    0 8px 26px rgba(0,0,0,0.42);
  --shadow-xl:    0 16px 48px rgba(0,0,0,0.55);
  --shadow-glow:  0 0 24px rgba(212, 166, 86, 0.35);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.50);
  --shadow-card:  0 6px 18px rgba(0, 0, 0, 0.30),
                  inset 0 1px 0 rgba(255, 255, 255, 0.55),
                  inset 0 -2px 0 rgba(140, 103, 34, 0.15);
  --shadow-focus: 0 0 0 3px rgba(212, 166, 86, 0.35);

  /* ============ FONTS ============ */
  --font-display: 'Cinzel', Georgia, serif;
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body:    'Manrope', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-content: 'Lora', Georgia, serif;
  --font-mono:    'JetBrains Mono', Consolas, Monaco, monospace;

  /* ============ TYPE-SCALE (FIX-CL-UI-A) ============ */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  2rem;      /* 32px */
  --text-4xl:  2.5rem;    /* 40px */

  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ============ TRANSITIES ============ */
  --t-fast:    150ms;
  --t-normal:  250ms;
  --t-slow:    400ms;
  --t-slower:  800ms;
  --easing:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);

  /* ============ Z-INDEX ============ */
  --z-base:     1;
  --z-sticky:   100;
  --z-dropdown: 500;
  --z-banner:   800;
  --z-modal:    1000;
  --z-toast:    10000;
  --z-tooltip:  100000;

  /* ============ BREAKPOINTS ============ */
  --bp-mobile:  480px;
  --bp-tablet:  768px;
  --bp-desktop: 1024px;

  /* ============ LAYOUT / CONTAINERS ============ */
  --container-max:    1200px;
  --container-narrow: 760px;
  --container-wide:   1440px;
  --container-form:   560px;        /* FIX-CL-UI-A: voor login/register/instellingen */
  --container-cards:  960px;        /* FIX-CL-UI-A: voor card-grids op account/markt */

  /* ============ BUTTON-TOKENS (FIX-CL-UI-A) ============ */
  --btn-height-sm:        28px;
  --btn-height-md:        38px;
  --btn-height-lg:        48px;
  --btn-padding-x-sm:     var(--space-3);
  --btn-padding-x-md:     var(--space-4);
  --btn-padding-x-lg:     var(--space-5);
  --btn-radius:           var(--radius-md);
  --btn-border-width:     1px;
  --btn-font-weight:      var(--weight-semibold);
  --btn-transition:       background var(--t-fast) var(--ease-out),
                          color var(--t-fast) var(--ease-out),
                          border-color var(--t-fast) var(--ease-out),
                          transform var(--t-fast) var(--ease-out),
                          box-shadow var(--t-fast) var(--ease-out);

  /* Primary (goud op donker) */
  --btn-primary-bg:        var(--gold);
  --btn-primary-bg-hover:  var(--gold-bright);
  --btn-primary-bg-active: var(--gold-deep);
  --btn-primary-ink:       var(--bg-deepest);
  --btn-primary-border:    var(--gold-deep);

  /* Ghost (transparant met goud-border) */
  --btn-ghost-bg:          transparent;
  --btn-ghost-bg-hover:    rgba(184, 137, 61, 0.12);
  --btn-ghost-ink:         var(--gold-bright);
  --btn-ghost-border:      var(--gold);

  /* Danger */
  --btn-danger-bg:         var(--status-error);
  --btn-danger-bg-hover:   #C95252;
  --btn-danger-ink:        var(--color-white);
  --btn-danger-border:     #7C2727;

  /* Subtle (op perkament) */
  --btn-subtle-bg:         rgba(140, 103, 34, 0.10);
  --btn-subtle-bg-hover:   rgba(140, 103, 34, 0.20);
  --btn-subtle-ink:        var(--text-on-parchment);
  --btn-subtle-border:     var(--border-parchment);

  /* ============ INPUT-TOKENS (FIX-CL-UI-A) ============ */
  --input-height:           38px;
  --input-padding-x:        var(--space-3);
  --input-padding-y:        var(--space-2);
  --input-radius:           var(--radius-md);
  --input-border-width:     1px;
  --input-bg:               rgba(255, 248, 235, 0.04);
  --input-bg-on-parchment:  var(--bg-creme);
  --input-ink:              var(--text-on-dark);
  --input-ink-on-parchment: var(--text-on-parchment);
  --input-border:           var(--border);
  --input-border-hover:     var(--border-strong);
  --input-border-focus:     var(--gold-bright);
  --input-placeholder:      var(--text-on-dark-faint);
  --input-shadow-focus:     var(--shadow-focus);
  --input-transition:       border-color var(--t-fast) var(--ease-out),
                            box-shadow var(--t-fast) var(--ease-out),
                            background var(--t-fast) var(--ease-out);

  /* ============ CARD-TOKENS (FIX-CL-UI-A) ============ */
  --card-padding:          var(--space-5);
  --card-padding-compact:  var(--space-4);
  --card-padding-lg:       var(--space-6);
  --card-gap:              var(--space-4);
  --card-radius:           var(--radius-lg);
  --card-border-width:     1px;

  /* Dark-variant (op outgame/ingame body) */
  --card-dark-bg:          rgba(38, 22, 7, 0.85);
  --card-dark-border:      var(--border);
  --card-dark-ink:         var(--text-on-dark);
  --card-dark-shadow:      var(--shadow-md);

  /* Parchment-variant */
  --card-parchment-bg:     var(--bg-parchment-1);
  --card-parchment-border: var(--border-parchment-strong);
  --card-parchment-ink:    var(--text-on-parchment);
  --card-parchment-shadow: var(--shadow-card);

  /* Admin-variant (op bg-beheer body) */
  --card-admin-bg:         var(--bg-beheer-card);
  --card-admin-border:     var(--border-subtle);
  --card-admin-ink:        var(--text-on-dark);
  --card-admin-shadow:     var(--shadow-sm);

  /* ============ Time-of-day ============ */
  --time-of-day: 0.5;
}