/* ==========================================================================
   ETVA Design System — CSS Custom Properties
   Palette låst 2026-05-18 (Magnes Farver.pdf).
   Tre hue-familier × 3 lightness: blå, orange, lilla.
   ========================================================================== */

:root {

  /* --- Blå-familien ---------------------------------------------------- */
  --blaa:       219 41% 50%;   /* #4B6EB4 satureret */
  --lyseblaa:   202 86% 88%;   /* #C8E6FA pastel — platform Beskæftigelse */
  --blaa-tint:  202 81% 92%;   /* #DCF0FA softest */

  /* --- Orange-familien ------------------------------------------------- */
  --orange:      25 86% 57%;   /* #F08232 satureret — platform Virksomheder */
  --peach:       24 92% 78%;   /* #FABE96 pastel */
  --orange-tint:  5 100% 75%;  /* #FF8C82 salmon tint */

  /* --- Lilla-familien -------------------------------------------------- */
  --lilla:      300 33% 30%;   /* #643264 satureret */
  --lyselilla:  300 17% 75%;   /* #C8B4C8 pastel — platform Overgange */
  --lilla-tint: 300 18% 88%;   /* #E6DCE6 softest */

  /* --- Neutral spine --------------------------------------------------- */
  /* Ren hvid KUN som tekst/ikon-forgrund på mættet baggrund.
     Brug --off-white (cream) som lys side-baggrund. */
  --white:        0 0% 100%;
  --off-white:   30 100% 98%;  /* #FFFAF5 cream — kanonisk lys baggrund */
  --warm-gray:    0 0% 25%;    /* #414141 — foreground default */
  --gray-mid:     0 0% 90%;    /* #E6E6E6 */
  --gray-light:   0 0% 94%;    /* #F0F0F0 */
  --border-light: 0 0% 90%;    /* alias til --gray-mid */

  /* --- Sektionsbånd ---------------------------------------------------- */
  --section-blue:  var(--blaa-tint);  /* #DCF0FA — cool break */
  --section-cream: 30 100% 98%;       /* #FFFAF5 — warm break (= off-white) */

  /* --- Legacy aliases -------------------------------------------------- */
  --lyseblaa-tint:  var(--blaa-tint);
  --lyselilla-tint: var(--lilla-tint);
  --gul:            var(--orange);
  --gul-tint:       22 90% 92%;
  --navy:           var(--lilla);
  --navy-deep:      300 35% 22%;      /* hover-state på .btn-primary */
  --navy-text:      var(--warm-gray);

  /* --- Constellation accents ------------------------------------------ */
  --constellation-blue:   var(--lyseblaa);
  --constellation-orange: var(--orange);
  --constellation-lime:   var(--orange);   /* deprecated alias */
  --constellation-purple: var(--lyselilla);

  /* --- Platform sub-brand tokens --------------------------------------- */
  --platform-1:       var(--lyseblaa);     /* Beskæftigelse */
  --platform-1-light: var(--blaa-tint);
  --platform-1-dark:  var(--blaa);
  --platform-2:       var(--orange);       /* Virksomheder */
  --platform-2-light: 22 90% 92%;
  --platform-2-dark:  22 86% 47%;
  --platform-3:       var(--lyselilla);    /* Overgange */
  --platform-3-light: var(--lilla-tint);
  --platform-3-dark:  var(--lilla);

  /* --- shadcn / system tokens ----------------------------------------- */
  --background:            var(--off-white);
  --foreground:            var(--warm-gray);
  --card:                  var(--off-white);
  --card-foreground:       var(--warm-gray);
  --popover:               var(--off-white);
  --popover-foreground:    var(--warm-gray);
  --primary:               var(--warm-gray);
  --primary-foreground:    var(--off-white);
  --secondary:             var(--lilla-tint);
  --secondary-foreground:  var(--warm-gray);
  --muted:                 var(--gray-light);
  --muted-foreground:      0 0% 40%;
  --accent:                var(--blaa);
  --accent-foreground:     var(--white);
  --destructive:           0 70% 45%;
  --destructive-foreground: var(--off-white);
  --border:                var(--border-light);
  --input:                 var(--border-light);
  --ring:                  var(--lilla);
  --radius:                8px;
  --radius-lg:             12px;

  /* --- Spatial rhythm -------------------------------------------------- */
  --space-hero:    160px;
  --space-section: 120px;
  --space-inner:    48px;
  --space-tight:    24px;

  /* --- Navigation ------------------------------------------------------ */
  --nav-h:        170px;
  --nav-h-scroll:  72px;
}

@media (max-width: 767px) {
  :root {
    --space-hero:    100px;
    --space-section:  72px;
    --space-inner:    32px;
  }
}

/* Mobil/tablet — samme breakpoint som hamburger-menuen (se _nav.css) */
@media (max-width: 1023px) {
  :root {
    --nav-h: 88px;
  }
}