/* =============================================================
   VIVA DESIGN TOKENS — single source of truth
   Grund: Viva Brand Bank (visual-identity.md + report-style.md)
   Tillägg: domän-tokens för audit-dashboard (severity, status, typ)

   REGEL: Alla färger/fonter/storlekar i HTML/CSS/JS ska hämtas
   härifrån via var(--token-name). Inga hex utanför denna fil
   utom i explicit allowlist (se _internal/design-policy.md).
   ============================================================= */

:root {
  /* ---------- 1. VIVA BRAND PALETTE (never rename) ---------- */
  --viva-lime:         #CAE780;
  --viva-dark-green:   #103833;
  --viva-light-green:  #49C09D;
  --viva-orange:       #FF6E23;
  --viva-pink:         #FBD0FF;
  --viva-black:        #000000;
  --viva-gray-1:       #7B7A71;
  --viva-gray-2:       #CBCAC7;
  --viva-gray-3:       #DDDDDB;
  --viva-gray-4:       #EEEEEE;
  --viva-white:        #FFFFFF;

  /* ---------- 2. SURFACE (ljus body, mörk hero) ---------- */
  --surface-page:        #F5F4F0;
  --surface-card:        var(--viva-white);
  --surface-card-hover:  #FAFAF8;
  --surface-muted:       #ECEAE4;
  --surface-dark:        var(--viva-dark-green);
  --surface-dark-alt:    #0C2A25;

  /* ---------- 3. TEXT ---------- */
  --text-primary:         #1A1A1A;
  --text-muted:           #4A4A4A;
  --text-dim:             #7A7A7A;
  --text-on-dark:         rgba(255, 255, 255, 0.92);
  --text-on-dark-muted:   rgba(255, 255, 255, 0.72);
  --text-on-dark-dim:     rgba(255, 255, 255, 0.52);

  /* ---------- 4. BORDERS ---------- */
  --border-soft:    rgba(16, 56, 51, 0.12);
  --border-strong:  rgba(16, 56, 51, 0.22);
  --border-on-dark: rgba(255, 255, 255, 0.12);

  /* ---------- 5. ACCENT / HIGHLIGHT ---------- */
  --accent-primary:    var(--viva-dark-green);
  --accent-secondary:  var(--viva-light-green);
  --accent-label:      #0D6B5E;
  --highlight-bg:      var(--viva-lime);
  --highlight-text:    var(--viva-dark-green);

  /* ---------- 6. SEVERITY (dämpade toner — rapportvision) ---------- */
  --severity-critical:     #C0392B;
  --severity-high:         #E67E22;
  --severity-medium:       #D4A017;
  --severity-low:          var(--viva-light-green);
  --severity-critical-bg:  #FDE8E8;
  --severity-high-bg:      #FDEBD3;
  --severity-medium-bg:    #FEF3CD;
  --severity-low-bg:       #D6F5E3;

  /* ---------- 7. STATUS (fynd-workflow — Rickys taxonomi) ---------- */
  --status-new:          #3B82F6;
  --status-progress:     #E67E22;
  --status-fixed:        var(--viva-light-green);
  --status-verified-ok:  var(--viva-light-green);
  --status-parked:       #9CA3AF;

  /* ---------- 8. FYND-TYP (F / SWE / NLF / REC) ---------- */
  --type-f:    #C0392B;
  --type-swe:  #A33025;
  --type-nlf:  #6B4AA6;
  --type-rec:  #3B82F6;

  /* ---------- 9. MIGRATION STATUS (corporate-map) ---------- */
  --migration-migrated:  #6B4AA6;
  --migration-legacy:    var(--viva-dark-green);
  --migration-separate:  #4A4A4A;
  --migration-blocked:   #9CA3AF;

  /* ---------- 10. TIMELINE EVENT TYPES ---------- */
  --event-session:    #3B82F6;
  --event-deploy:     var(--viva-light-green);
  --event-milestone:  #E67E22;
  --event-decision:   #6B4AA6;
  --event-feature:    #D94F8A;

  /* ---------- 11. SCORE BARS (Viva report-style) ---------- */
  --score-weak:    var(--severity-critical);
  --score-medium:  var(--severity-medium);
  --score-strong:  var(--severity-low);

  /* ---------- 12. TYPOGRAPHY ---------- */
  --font-sans:           'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-feature-nums:   'tnum' 1, 'cv09' 1;

  --font-size-micro:    11px;
  --font-size-caption:  12px;
  --font-size-small:    13px;
  --font-size-body:     15px;
  --font-size-lead:     17px;
  --font-size-h3:       20px;
  --font-size-h2:       clamp(22px, 3vw, 30px);
  --font-size-h1:       clamp(28px, 4vw, 44px);
  --font-size-kpi:      32px;
  --font-size-display:  clamp(40px, 6vw, 56px);

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

  --line-height-tight:  1.15;
  --line-height-base:   1.5;
  --line-height-body:   1.65;

  --letter-spacing-tight:    -0.5px;
  --letter-spacing-heading:  -1px;
  --letter-spacing-caps:     0.8px;

  /* ---------- 13. SPACING SCALE ---------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* ---------- 14. RADIUS ---------- */
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-pill:  999px;

  /* ---------- 15. SHADOW ---------- */
  --shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-dark:  0 4px 12px rgba(0, 0, 0, 0.3);

  /* ---------- 16. LAYOUT ---------- */
  --max-width:         1200px;
  --max-width-report:  960px;

  /* ---------- 17. DECO ---------- */
  --deco-gradient:  linear-gradient(90deg, var(--viva-lime), var(--viva-light-green));

  /* ---------- 18. LEGACY ALIASES ----------
     Används av befintlig kod i app.js/styles.css. Rensas bort
     i paket 6 när all inline-styling migrerats till klasser.
     ------------------------------------------------------ */
  --bg:              var(--surface-page);
  --bg-card:         var(--surface-card);
  --bg-card-hover:   var(--surface-card-hover);
  --bg-surface:      var(--surface-muted);
  --border:          var(--border-soft);
  --border-light:    var(--border-strong);
  --text:            var(--text-primary);
  --accent-heading:  var(--accent-primary);
  --accent-chip-bg:  var(--accent-primary);
  --critical:        var(--severity-critical);
  --high:            var(--severity-high);
  --medium:          var(--severity-medium);
  --low:             var(--severity-low);
  --radius:          var(--radius-md);
}