/* ════════════════════════════════════════════════════════════════
   MÄKLARGRUVAN — DESIGN TOKENS
   ════════════════════════════════════════════════════════════════
  Här läggslägger vi alla designvärden (färger, typsnitt, avstånd, skuggor etc) i form av CSS-variabler. Dessa används sedan av alla moduler och teman för att skapa en enhetlig design som är lätt att underhålla och uppdatera.
  - Fasta värden (t.ex. hex-koder) definieras här som primitiva tokens (ex --mg-navy, --mg-gold) som inte ändras i dark mode.
  - Semantiska tokens (ex --mg-ink, --mg-surface) pekar på de primitiva och FÅR ändras i dark mode via mg-dark.css. Detta gör det möjligt att centralisera alla dark mode-färger i mg-dark.css utan att behöva ändra modulernas kod.
  - Tokens är namngivna med --mg- prefix för att undvika krockar med modulernas egna variabler och för att tydligt signalera att de är en del av det delade designlagret.
     - Alla värden är definierade som CSS-variabler för att möjliggöra enkel återanvändning och underhåll. För att ändra en färg eller ett typsnitt i hela designen, ändra bara värdet här i tokens-filen.
     - För att göra en kundanpassning, skapa en ny CSS-fil som importerar mg-tokens.css och skriver över de semantiska tokens med kundens färger. Länka sedan den filen EFTER mg-tokens.css i index.html.
   - För dark mode, se mg-dark.css där de semantiska tokens pekar om till mörka värden som också är definierade som primitiva tokens i det blocket.
    
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── NAVY ──────────────────────────────────────────────────────── */
  --mg-navy:          #0d263f;   /* primär navy (alla moduler) */
  --mg-navy-2:        #284157;   /* navy-2 (broschyr --a). index --ink-2=#183756, se not */
  --mg-navy-2-alt:    #183756;   /* index --ink-2 (avviker — harmoniseringskandidat) */

  /* ── GULD / KOPPAR ────────────────────────────────────────────── */
  --mg-gold:          #a87742;   /* brand-guld (Prowebb 2026-06-08; tidigare #b87539) */
  --mg-gold-light:    #c89353;   /* highlight i glans-gradient */
  --mg-gold-dark:     #8f6232;   /* skugga i glans-gradient */
  --mg-dark-gold:     #c99a5f;   /* guld dark (alla) */
  --mg-gold-soft:     #f4eadf;   /* mycket svag guldyta */
  --mg-gold-shine:    linear-gradient(180deg, #c89353 0%, #a87742 50%, #8f6232 100%);

  /* ── YTOR / PAPPER ────────────────────────────────────────────── */
  --mg-cream:         #fbf8f3;   /* varmt papper (Prowebb 2026-06-08; tidigare #f6f2ec) */
  --mg-surface:       #fffdf9;   /* nästan-vit kortyta (index --paper, broschyr --surface, pilot --card-bg) */
  --mg-surface-soft:  #fdfaf3;   /* mjukare kortyta (pilot --card-soft) */
  --mg-surface-stat:  #f3eee3;   /* stat-kort (pilot --card-stat) */
  --mg-panel:         rgba(255,255,255,.86); /* glas-panel (index) */
  --mg-info-soft:     #f0f4ff;   /* svag info-yta (--l) */
  --mg-status-saved:  #1f6f45;   /* UI-status: autosparat/klart */
  --mg-status-saving: #b87539;   /* UI-status: sparar/pågår */

  /* ── TEXT ─────────────────────────────────────────────────────── */
  --mg-ink:           #0d263f;   /* = navy, primär text */
  --mg-ink-2:         #183756;   /* sekundär text (index) */
  --mg-ink-soft:      #657385;   /* sekundär text (pilot/sociala/broschyr) */
  --mg-ink-soft-alt:  #607086;   /* index --muted (avviker — harmoniseringskandidat) */
  --muted: #607086;
  --mg-ink-faint:     #9aa4b1;   /* svagaste text (--text-muted / --soft) */

  /* ── LINJER / SKUGGOR / GEOMETRI ──────────────────────────────── */
  --mg-line:          rgba(13,38,63,.12);  /* varm genomskinlig linje (Prowebb 2026-06-08; ersätter val C #b6c0cc) */
  --mg-line-alt:      rgba(13,38,63,.11);  /* index linje (avviker) */
  --mg-line-warm:     rgba(168,119,66,.24);
  --mg-shadow:        0 24px 65px rgba(13,38,63,.11);
  --mg-shadow-soft:   0 12px 28px rgba(13,38,63,.08);
  --mg-radius:        8px;
  --mg-header-h:      88px;  /* toppbarens höjd — ENDA källan. Används av .topbar-inner
                                (mg-brand.css) och header.css. Sidor med fasta offsets mot
                                headern (broschyr, planritningar) räknar mot samma tal. */

  /* ── TYPSNITT ─────────────────────────────────────────────────── */
  --mg-font:          "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mg-serif:         "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --mg-mono:          "JetBrains Mono", ui-monospace, monospace;

  /* ════════════════════════════════════════════════════════════════
     MÖRKA VÄRDEN — fasta primitiver (flippar INTE här).
     Modulens egna body[data-theme="dark"]-block pekar sina variabler
     mot dessa i stället för hårdkodad dark-hex.
     ════════════════════════════════════════════════════════════════ */
  --mg-dark-bg:         #101925;   /* sidbakgrund dark (alla) */
  --mg-dark-surface:    #152233;   /* panel/kort dark (alla) */
  --mg-dark-surface-2:  #1a2a3e;   /* mjukare kortyta dark (pilot --card-soft) */
  --mg-dark-surface-3:  #1e3048;   /* stat-kort dark (pilot --card-stat) */
  --mg-dark-ink:        #f3efe8;   /* primär text dark (alla) */
  --mg-dark-ink-soft:   #b7ad9f;   /* sekundär text dark (alla) */
  --mg-dark-ink-faint:  #8f8578;   /* svagaste text dark */
  --mg-dark-cool:       #d8e0e8;   /* sval ljus accent dark (--a i dark; index --ink-2 dark) */
  --mg-dark-line:       rgba(182,192,204,.18);  /* sval linje dark (matchar val C) */
  --mg-dark-line-warm:  rgba(201,154,95,.30);

  --mg-dark-gold-light: #dab080;
  --mg-dark-gold-dark:  #b78343;
  --mg-dark-gold-2:     #d7ad72;   /* broschyr --g2 dark */
  --mg-dark-gold-soft:  rgba(201,154,95,.12);
  --mg-dark-gold-shine: linear-gradient(180deg, #dab080 0%, #c99a5f 45%, #b78343 100%);
  --mg-dark-shadow:     0 22px 60px rgba(0,0,0,.34);
  --mg-dark-shadow-soft:0 12px 34px rgba(0,0,0,.22);

  /* ════════════════════════════════════════════════════════════════
     ACTIVE / VALD-ACCENT (för Prowebb-knapplagret i mg-brand.css)
     Navy i ljus → GULD i mörk (beslut 2026-06-02). Semantisk token
     som FÅR flippa — används bara av nya .mg-*-komponenter och
     krockar inte med modulernas egna variabelnamn.
     ════════════════════════════════════════════════════════════════ */
  --mg-accent-active:  var(--mg-navy);
  --mg-active-fill:    linear-gradient(135deg, rgba(13,38,63,.10), rgba(13,38,63,.045));
  --mg-active-ring:    rgba(13,38,63,.06);

  /* Legacy aliases used by existing inline page CSS. Keep values here so
     modules do not need to repeat the same colors, fonts and surfaces. */
  --mg-gold-2:        #c99a5f;

  --p:                var(--mg-navy);
  --a:                var(--mg-gold);
  --l:                var(--mg-cream);
  --g:                var(--mg-gold);
  --g-light:          var(--mg-gold-light);
  --g-dark:           var(--mg-gold-dark);
  --g2:               var(--mg-gold-2);
  --g-shine:          var(--mg-gold-shine);
  --gold:             var(--mg-gold);
  --gold-2:           var(--mg-gold-2);
  --gold-soft:        var(--mg-gold-soft);
  --gold-shine:       var(--mg-gold-shine);

  --ink:              var(--mg-ink);
  --ink-2:            var(--mg-ink-2);
  --muted:            var(--mg-ink-soft-alt);
  --soft:             var(--mg-ink-faint);
  --text:             var(--mg-ink);
  --text-soft:        var(--mg-ink-soft);
  --text-muted:       var(--mg-ink-faint);

  --cream:            var(--mg-cream);
  --paper:            var(--mg-cream);
  --surface:          var(--mg-surface);
  --panel:            var(--mg-panel);
  --card-bg:          var(--mg-surface);
  --card-soft:        var(--mg-surface-soft);
  --card-stat:        var(--mg-surface-stat);

  --line:             var(--mg-line);
  --line-warm:        var(--mg-line-warm);
  --shadow:           var(--mg-shadow);
  --shadow-soft:      var(--mg-shadow-soft);
  --radius:           var(--mg-radius);

  --font:             var(--mg-font);
  --display:          var(--mg-serif);
  --serif:            var(--mg-serif);
  --mono:             var(--mg-mono);

}