/* ============================================================
   vm_palette.css — LAGER 0: RÅPALETT (Vision Manager)
   ============================================================
   ENDA stället i hela systemet med råa hex-värden.

   Arkitektur (beslut 2026-06-10, atelier kanoniskt fundament):
     LAGER 0  vm_palette.css   råa hex (--palette-*)        ← DENNA FIL
       ↓ var()
     LAGER 1  vm_tokens.css    semantiska --vm-* (theme)
       ↓ var()
     LAGER 2  komponenter/mallar  använder BARA --vm-*

   Framtida färgbyte = ändra värden HÄR, på ett ställe. Inga andra
   filer eller mallar rörs. Lägg nya RÅfärger här, ge dem semantik
   i vm_tokens.css. Hårdkoda ALDRIG hex utanför denna fil.

   Värdena är portade ur atelier.css (driftpanelens Dag/Natt-palett).
   Laddas FÖRE vm_tokens.css i base.html + i driftpanel_atelier.html.
   ============================================================ */

:root {
  /* ── BLÅ — accent-ramp (atelier #0a6cff-familjen, ger "liv" via nyanser) ── */
  --palette-blue-700:  #0a4fae;   /* active, mörkt läge-botten */
  --palette-blue-600:  #0a5fd0;   /* hover (ljus) / gradient-slut på primär-actions */
  --palette-blue-500:  #0a6cff;   /* ACCENT — ljus läge */
  --palette-blue-450:  #0a84ff;   /* accent-2 (ramp-nyans) */
  --palette-blue-400:  #2a95ff;   /* ACCENT — mörkt läge */
  --palette-blue-300:  #5ab0ff;   /* hover — mörkt läge */
  --palette-blue-500-rgb: 10, 108, 255;
  --palette-blue-400-rgb: 42, 149, 255;

  /* ── CREAM — ljusa ytor (atelier "Dag") ── */
  --palette-cream-50:  #f1efe9;   /* sid-bakgrund */
  --palette-cream-100: #fbfaf7;   /* kort / panel / elevated */
  --palette-cream-150: #f6f4ef;   /* sekundär yta */

  /* ── NIGHT — mörka ytor (atelier "Natt") ── */
  --palette-night-900: #14161c;   /* sid-bakgrund */
  --palette-night-800: #1b1e26;   /* kort / panel */
  --palette-night-700: #21242e;   /* sekundär yta / elevated */

  /* ── INK — text i ljust läge ── */
  --palette-ink-900: #16181d;     /* primär (atelier --ink) */
  --palette-ink-600: #565b66;     /* sekundär (atelier --soft) */
  --palette-ink-500: #4b5563;     /* muted — WCAG AA mot cream */
  --palette-ink-400: #9a9ea8;     /* atelier --faint — DEKORATIV, ej brödtext (för ljus) */

  /* ── PAPER — text i mörkt läge ── */
  --palette-paper-50:  #f4f5f8;   /* primär (atelier --ink Natt) */
  --palette-paper-300: #aab0bd;   /* sekundär (atelier --soft Natt) */
  --palette-paper-500: #6b7280;   /* muted (atelier --faint Natt) */

  /* ── STATUS — bas + WCAG-tunade text-varianter (ljust / mörkt) ── */
  --palette-green-500:    #0f9d63;
  --palette-green-text-l: #0a7a4a;
  --palette-green-text-d: #34d399;
  --palette-amber-500:    #d98a00;
  --palette-amber-text-l: #8a5a00;
  --palette-amber-text-d: #f0ad3c;
  --palette-red-500:      #e5342b;
  --palette-red-text-l:   #c0271f;
  --palette-red-text-d:   #ff7a70;
  --palette-green-500-rgb: 15, 157, 99;
  --palette-amber-500-rgb: 217, 138, 0;
  --palette-red-500-rgb:   229, 52, 43;

  /* ── HÅRLINJER (alpha — theme-specifika, atelier --hair-familjen) ── */
  --palette-hair-on-light:        rgba(20, 24, 34, 0.08);
  --palette-hair-on-light-2:      rgba(20, 24, 34, 0.045);
  --palette-hair-on-light-strong: rgba(20, 24, 34, 0.22);
  --palette-hair-on-dark:         rgba(255, 255, 255, 0.09);
  --palette-hair-on-dark-2:       rgba(255, 255, 255, 0.05);
  --palette-hair-on-dark-strong:  rgba(255, 255, 255, 0.22);

  /* ── SKUGGOR (atelier — mjuka, theme-specifika) ── */
  --palette-shadow-light:    0 1px 2px rgba(20, 24, 34, 0.04), 0 10px 30px rgba(20, 24, 34, 0.06);
  --palette-shadow-light-lg: 0 2px 6px rgba(20, 24, 34, 0.05), 0 24px 60px rgba(20, 24, 34, 0.10);
  --palette-shadow-dark:     0 1px 2px rgba(0, 0, 0, 0.30), 0 10px 30px rgba(0, 0, 0, 0.40);
  --palette-shadow-dark-lg:  0 2px 6px rgba(0, 0, 0, 0.40), 0 24px 60px rgba(0, 0, 0, 0.50);
}