/* ============================================================
 * Klimaskoler — design tokens
 * Bygget på Miira-designsystemet (hej.miira.dk/styleguide.html):
 * samme --miira-* tokens, radius, skygger, typografi og 3D-"shelf".
 * Temaet "klima" erstatter Miiras gule accent med brandets grønne
 * (--miira-green) og tinter flader og streger grønt i stedet for gyldent.
 * Komponenter læser KUN tokens — aldrig rå hex.
 * ============================================================ */

:root {
  /* Brand (samme i alle temaer) */
  --miira-brown:   #5c4500;
  --miira-yellow:  #ffbf00;
  --miira-orange:  #ff8049;
  --miira-green:   #00bd62;
  --miira-blue:    #3368d1;
  --miira-red:     #e74c3c;

  /* Klima-brandets dybe grøn: blæk på grøn flade og 3D-læbe under
     hero-knappen (samme rolle som --miira-brown har over for gul). */
  --kks-deep:      #03431f;
  --kks-mint:      #c4ecd2;   /* = --miira-sticky-green */

  --miira-sticky-yellow: #ffe9a8;
  --miira-sticky-green:  #c4ecd2;
  --miira-sticky-blue:   #c7dcf7;
  --miira-sticky-ink:    #302400;

  /* Radius */
  --miira-radius-sm: 5px;
  --kks-radius-xs: 3px;        /* små markeringer: prikker, søjler, waffle-felter */
  --kks-print-paper: #ffffff;  /* papirfarve ved udskrift, uanset tema */
  --miira-radius-md: 10px;
  --miira-radius-lg: 20px;

  /* Typografi — Roobert PRO er Miiras brandfont, hostet selv fra /fonts
     (ingen eksterne fontkald — vigtigt for GDPR på skoler). Som i Miira findes
     der ingen SemiBold: vægt 600 tegnes med Bold-filen. */
  --miira-font:
    'Roobert PRO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
  --miira-font-size-h1: 2.5rem;
  --miira-font-size-h2: 2rem;
  --miira-font-size-h3: 1.5rem;
  --miira-font-size-h4: 1.125rem;
  --miira-font-size-h5: 0.9375rem;
  --miira-font-size-body: 1rem;
  --miira-font-size-sm:   0.875rem;
  --miira-font-size-xs:   0.75rem;
  --kks-font-size-hero:   clamp(2.4rem, 6vw, 4.25rem);
  --kks-font-size-stat:   clamp(2.25rem, 5vw, 3.5rem);

  --miira-icon-btn-size:       32px;
  --miira-icon-btn-round-size: 44px;
}

@font-face { font-family: 'Roobert PRO'; font-weight: 300; font-display: swap; src: url('/fonts/RoobertPRO-Light.woff2') format('woff2'); }
@font-face { font-family: 'Roobert PRO'; font-weight: 400; font-display: swap; src: url('/fonts/RoobertPRO-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Roobert PRO'; font-weight: 500; font-display: swap; src: url('/fonts/RoobertPRO-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Roobert PRO'; font-weight: 700; font-display: swap; src: url('/fonts/RoobertPRO-Bold.woff2') format('woff2'); }

/* ------- Tema: klima (lyst, grønt) — standard ------- */
:root,
[data-theme='klima'] {
  --miira-bg-primary:     #fbfefb;
  --miira-bg-secondary:   #f5fbf6;
  --miira-bg-surface:     #edf7f0;
  --miira-bg-input:       #ffffff;
  --miira-bg-hover:       #dcefe2;
  --miira-text-primary:   #0f2e1d;
  --miira-text-secondary: #4b6b59;
  --miira-text-muted:     #5f7f6c;
  --miira-border-color:   #cfe5d6;
  --miira-border-hover:   #b2d4bd;
  --kks-field-edge:       #9cc2a9;
  --kks-map-land:         #e6f4ea;
  --kks-danger-fill:      #c0392b;
  --kks-on-danger:        #ffffff;
  --kks-switch-thumb:     var(--kks-deep);
  --miira-card-edge:      #cfe5d6;
  --miira-card-edge-hover: #b2d4bd;
  --miira-3d-shadow:      #009a4f;
  --miira-accent-shade:   #009a4f;
  --miira-accent:         var(--miira-green);
  --miira-accent-text:    var(--kks-deep);
  --miira-focus-ring:     var(--miira-3d-shadow);
  --miira-shadow-rgb:     3, 67, 31;
  --miira-shadow:        0 2px 8px rgba(var(--miira-shadow-rgb), 0.08);
  --miira-shadow-strong: 0 4px 12px rgba(var(--miira-shadow-rgb), 0.14);
  --miira-shadow-elev:   0 8px 24px rgba(var(--miira-shadow-rgb), 0.18);
  --miira-shadow-modal:  0 20px 60px rgba(var(--miira-shadow-rgb), 0.28);
  --miira-paper-bg:       #ffffff;
  --miira-segmented-control-bg:        var(--miira-bg-surface);
  --miira-segmented-control-indicator: #ffffff;
  --miira-segmented-control-text:      var(--miira-text-secondary);

  /* Datafarver — valideret kategorisk palet (8 felter, fast rækkefølge;
     tjekket for farveblindhed med dataviz-validatoren). */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #6250d6;
  --series-8: #e34948;
  --series-9: #0f8fa3;
  --series-10: #b14fc5;
  --series-muted: #c9d8ce;
  --chart-grid:   #e3efe6;
  color-scheme: light;
}

/* ------- Tema: mørk klima ------- */
[data-theme='klima-dark'] {
  --miira-bg-primary:     #0c1a12;
  --miira-bg-secondary:   #102117;
  --miira-bg-surface:     #15291d;
  --miira-bg-input:       #1b3325;
  --miira-bg-hover:       #1f3a2a;
  --miira-text-primary:   #e4f4e9;
  --miira-text-secondary: #a8c9b4;
  --miira-text-muted:     #7aa088;
  --miira-border-color:   #234030;
  --miira-border-hover:   #2f5640;
  --kks-field-edge:       #3d6b51;
  --kks-map-land:         #17301f;
  --kks-danger-fill:      #c0392b;
  --kks-on-danger:        #ffffff;
  --kks-switch-thumb:     var(--miira-text-primary);

  --miira-card-edge:      #234030;
  --miira-card-edge-hover: #2f5640;
  --miira-3d-shadow:      #007a3e;
  --miira-accent-shade:   #007a3e;
  --miira-accent:         var(--miira-green);
  --miira-accent-text:    var(--kks-deep);
  --miira-focus-ring:     color-mix(in srgb, var(--miira-green) 70%, transparent);
  --miira-shadow-rgb:     0, 0, 0;
  --miira-shadow:        0 2px 8px rgba(var(--miira-shadow-rgb), 0.25);
  --miira-shadow-strong: 0 4px 12px rgba(var(--miira-shadow-rgb), 0.3);
  --miira-shadow-elev:   0 8px 24px rgba(var(--miira-shadow-rgb), 0.35);
  --miira-shadow-modal:  0 20px 60px rgba(var(--miira-shadow-rgb), 0.5);
  --miira-paper-bg:       #102117;
  --miira-segmented-control-bg:        var(--miira-bg-surface);
  --miira-segmented-control-indicator: #234030;
  --miira-segmented-control-text:      var(--miira-text-secondary);

  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
  --series-9: #2bb3c7;
  --series-10: #d68ae3;
  --series-muted: #2c4636;
  --chart-grid:   #1c3326;
  color-scheme: dark;
}