/* tokens.css — Design-tokens delt mellom alle frontender
 * Palett: Dyp skoggrønn + varm sand + myk terrakotta
 * Font: Instrument Serif (display) + DM Sans (body)
 */

:root {
    /* Bakgrunn */
    --bg:           #f7f5f0;
    --bg2:          #ffffff;
    --bg3:          #efece5;
    --bg-header:    #1a2e1e;
    --bg-elevated:  #ffffff;

    /* Border */
    --border:       #d4cfc4;
    --border2:      #bdb7aa;
    --border-light: #e8e4dc;
    --border-focus: #1a7a52;

    /* Tekst */
    --text:         #1a1a1a;
    --text2:        #524e47;
    --text3:        #8e897f;
    --text-inverse: #f7f5f0;

    /* Primær (skoggrønn) */
    --accent:       #1a7a52;
    --accent2:      #15634a;
    --accent3:      #104d3a;
    --accent-soft:  #dff2e8;
    --accent-glow:  rgba(26, 122, 82, 0.06);

    /* Mørk skog (brukt i header/sidebar) */
    --forest:       #1a2e1e;
    --forest-light: #243828;
    --forest-dark:  #0f1b12;

    /* Sekundære aksenter */
    --terracotta:       #b85c3a;
    --terracotta-soft:  #fdf0e8;
    --terracotta-dim:   rgba(184, 92, 58, 0.08);

    --teal:         #1a7a7a;
    --teal-soft:    #dff2f2;
    --teal-dim:     rgba(26, 122, 122, 0.06);

    /* Status */
    --green:        #1a7a42;
    --green-soft:   #ddf2e6;
    --green-dim:    rgba(26, 122, 66, 0.06);
    --red:          #b91c1c;
    --red-soft:     #fde8e8;
    --red-dim:      rgba(185, 28, 28, 0.06);
    --amber:        #b45309;
    --amber-soft:   #fef3c7;
    --amber-dim:    rgba(180, 83, 9, 0.08);
    --blue:         #1e40af;
    --blue-soft:    #dbeafe;
    --blue-dim:     rgba(30, 64, 175, 0.06);

    /* Form/radius */
    --radius-xs:    4px;
    --radius-sm:    6px;
    --radius:       8px;
    --radius-lg:    14px;
    --radius-xl:    20px;
    --radius-full:  9999px;

    /* Skygge */
    --shadow-xs:    0 1px 2px rgba(26, 46, 30, 0.04);
    --shadow-sm:    0 1px 3px rgba(26, 46, 30, 0.05);
    --shadow:       0 1px 3px rgba(26, 46, 30, 0.05), 0 6px 20px rgba(26, 46, 30, 0.07);
    --shadow-lg:    0 4px 12px rgba(26, 46, 30, 0.06), 0 20px 48px rgba(26, 46, 30, 0.1);
    --shadow-xl:    0 8px 24px rgba(26, 46, 30, 0.08), 0 32px 80px rgba(26, 46, 30, 0.15);

    /* Fonter — Inter for body (proff SaaS-standard), Fraunces for display (variabel serif) */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:    'JetBrains Mono', 'Consolas', ui-monospace, monospace;

    /* Spacing skala (4px grid) */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* Transisjon */
    --transition:      150ms ease;
    --transition-slow: 300ms ease;

    /* Z-index */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   900;
    --z-modal:     1000;
    --z-toast:     1100;
}

/* =============================================================================
   DARK MODE — overrides
============================================================================= */
[data-theme="dark"] {
    color-scheme: dark;

    /* Bakgrunn — dempede skogtoner med varm tone */
    --bg:           #14201a;
    --bg2:          #1c2a23;
    --bg3:          #25342c;
    --bg-header:    #0d1611;
    --bg-elevated:  #25342c;

    --border:       #324239;
    --border2:      #45574c;
    --border-light: #2a3a31;
    --border-focus: #4eb185;

    --text:         #e8e2d3;
    --text2:        #b3aa97;
    --text3:        #7d7567;
    --text-inverse: #14201a;

    --accent:       #4eb185;
    --accent2:      #6cc89c;
    --accent3:      #92dab8;
    --accent-soft:  rgba(78, 177, 133, 0.18);
    --accent-glow:  rgba(78, 177, 133, 0.10);

    --forest:       #0d1611;
    --forest-light: #14201a;
    --forest-dark:  #060b08;

    --terracotta:       #d97a55;
    --terracotta-soft:  rgba(217, 122, 85, 0.18);
    --terracotta-dim:   rgba(217, 122, 85, 0.10);

    --teal:         #4eb1b1;
    --teal-soft:    rgba(78, 177, 177, 0.18);
    --teal-dim:     rgba(78, 177, 177, 0.10);

    --green:        #6cc88c;
    --green-soft:   rgba(108, 200, 140, 0.18);
    --green-dim:    rgba(108, 200, 140, 0.10);
    --red:          #f87171;
    --red-soft:     rgba(248, 113, 113, 0.18);
    --red-dim:      rgba(248, 113, 113, 0.10);
    --amber:        #fbbf24;
    --amber-soft:   rgba(251, 191, 36, 0.18);
    --amber-dim:    rgba(251, 191, 36, 0.10);
    --blue:         #6daefc;
    --blue-soft:    rgba(109, 174, 252, 0.18);
    --blue-dim:     rgba(109, 174, 252, 0.10);

    /* Skygger trenger mer dybde på mørke flater */
    --shadow-xs:    0 1px 2px rgba(0,0,0,0.25);
    --shadow-sm:    0 1px 3px rgba(0,0,0,0.3);
    --shadow:       0 1px 3px rgba(0,0,0,0.3), 0 6px 20px rgba(0,0,0,0.4);
    --shadow-lg:    0 4px 12px rgba(0,0,0,0.35), 0 20px 48px rgba(0,0,0,0.5);
    --shadow-xl:    0 8px 24px rgba(0,0,0,0.4), 0 32px 80px rgba(0,0,0,0.6);
}

/* Logo-inversjon i dark mode (hvis logoen er svart-på-transparent kan den være vanskelig
 * å se på mørk bakgrunn — invertér ved hjelp av filter). */
[data-theme="dark"] .login-logo-img,
[data-theme="dark"] .boot-logo-img {
    filter: brightness(1.05) drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}