/* ============================================================
   LexiCompliance Design Tokens — én kilde for hele plattformen
   Premium fintech/enterprise-stil. Tillitsvekkende.
   ============================================================ */

:root {
    /* === FARGER — Mørk modus (default) === */
    /* Bakgrunn-lag, dybde gjennom luminans */
    --bg-base:        #0a0e1a;   /* dypeste lag */
    --bg-elevated:    #0f1525;   /* sidebar, panels */
    --bg-card:        #131a2e;   /* kort */
    --bg-input:       #0d1322;   /* skjemafelt */
    --bg-overlay:     rgba(10,14,26,0.85);
    --bg-glass:       rgba(255,255,255,0.03);
    --chrome-bg:      #14182a;
    --chrome-border:  rgba(255,255,255,0.08);
    --main-bg:        #0a0e1a;

    /* Border */
    --border-subtle:  rgba(255,255,255,0.06);
    --border-default: rgba(255,255,255,0.10);
    --border-strong:  rgba(255,255,255,0.18);
    --border-focus:   rgba(108,99,255,0.50);

    /* Tekst — alle MOT --bg-card #131a2e gir minst 4.5:1 (WCAG AA normaltekst) */
    --text-primary:   #f1f4f9;   /* 15.4:1 mot bg-card */
    --text-secondary: #c5cdda;   /*  9.5:1 mot bg-card (var #a8b3c5 = 6.5) */
    --text-muted:     #9ba5b8;   /*  5.6:1 mot bg-card (var #6b7689 = 3.76 — failed AA) */
    --text-disabled:  #6b7689;   /* 3.76:1 — kun disabled UI / dekorativ */
    --text-inverse:   #0a0e1a;

    /* Merkevare og aksent */
    --brand-50:  #eef0ff;
    --brand-100: #d9dcff;
    --brand-200: #b8bbff;
    --brand-300: #9491ff;
    --brand-400: #7e75ff;
    --brand-500: #5e54ee;     /* primær LexiCo-aksent — justert fra #6c63ff for AA hvit-tekst-kontrast (4.92:1) */
    --brand-600: #4a40d4;
    --brand-700: #4940b8;
    --brand-800: #3a3290;
    --brand-900: #2c2670;

    /* Sekundær aksent — havblå (tillit, soliditet) */
    --teal-400: #2dd4bf;
    --teal-500: #14b8a6;
    --teal-600: #0d9488;

    /* Status */
    /* Status — dark mode (alle status-fg skal gi 4.5+:1 mot bg-card og badge-bg) */
    --success-bg:     rgba(16,185,129,0.12);
    --success-fg:     #34d399;     /* var #10b981 = 4.4:1 mot badge-bg — ny: 5.7:1 */
    --success-border: rgba(16,185,129,0.30);

    --warning-bg:     rgba(245,158,11,0.12);
    --warning-fg:     #fbbf24;     /* var #f59e0b = 3.0:1 — ny: 5.5:1 */
    --warning-border: rgba(245,158,11,0.30);

    --danger-bg:      rgba(239,68,68,0.12);
    --danger-fg:      #f87171;     /* var #ef4444 = 4.12:1 — ny: 5.6:1 */
    --danger-border:  rgba(239,68,68,0.30);

    --info-bg:        rgba(59,130,246,0.12);
    --info-fg:        #93c5fd;     /* var #60a5fa = 3.6:1 — ny: 5.8:1 */
    --info-border:    rgba(59,130,246,0.30);

    /* === TYPOGRAFI === */
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    --font-display: 'Inter', -apple-system, system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', 'SF Mono', 'Cascadia Code', Consolas, monospace;

    --text-xs:    0.75rem;     /* 12 */
    --text-sm:    0.8125rem;   /* 13 */
    --text-base:  0.875rem;    /* 14 */
    --text-md:    0.9375rem;   /* 15 */
    --text-lg:    1.0625rem;   /* 17 */
    --text-xl:    1.25rem;     /* 20 */
    --text-2xl:   1.5rem;      /* 24 */
    --text-3xl:   1.875rem;    /* 30 */
    --text-4xl:   2.25rem;     /* 36 */
    --text-5xl:   3rem;        /* 48 */
    --text-6xl:   3.75rem;     /* 60 */

    --leading-tight:  1.25;
    --leading-snug:   1.375;
    --leading-normal: 1.55;
    --leading-relaxed:1.65;

    --tracking-tight:  -0.025em;
    --tracking-normal: 0;
    --tracking-wide:   0.025em;
    --tracking-wider:  0.05em;

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

    /* === SPACING (4-pkt skala) === */
    --space-0:  0;
    --space-1:  0.25rem;   /* 4 */
    --space-2:  0.5rem;    /* 8 */
    --space-3:  0.75rem;   /* 12 */
    --space-4:  1rem;      /* 16 */
    --space-5:  1.25rem;   /* 20 */
    --space-6:  1.5rem;    /* 24 */
    --space-7:  1.75rem;   /* 28 */
    --space-8:  2rem;      /* 32 */
    --space-10: 2.5rem;    /* 40 */
    --space-12: 3rem;      /* 48 */
    --space-16: 4rem;      /* 64 */
    --space-20: 5rem;      /* 80 */
    --space-24: 6rem;      /* 96 */

    /* === BORDER-RADIUS === */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* === SHADOWS (premium, layered) === */
    --shadow-xs:  0 1px 2px rgba(0,0,0,0.20);
    --shadow-sm:  0 2px 4px rgba(0,0,0,0.20), 0 1px 2px rgba(0,0,0,0.15);
    --shadow-md:  0 4px 8px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.15);
    --shadow-lg:  0 12px 24px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.20);
    --shadow-xl:  0 24px 48px rgba(0,0,0,0.35), 0 8px 16px rgba(0,0,0,0.25);
    --shadow-glow: 0 0 24px rgba(108,99,255,0.25);
    --shadow-inner: inset 0 1px 2px rgba(0,0,0,0.20);

    /* === ANIMASJON === */
    --transition-fast:    120ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base:    180ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:    280ms cubic-bezier(0.4, 0, 0.2, 1);
    --easing-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);

    /* === LAYOUT === */
    --sidebar-width:     264px;
    --sidebar-collapsed: 72px;
    --header-height:     64px;
    --content-max:       1440px;

    /* === Z-INDEX === */
    --z-sticky:    100;
    --z-dropdown:  500;
    --z-modal:     1000;
    --z-toast:     1500;
    --z-tooltip:   2000;
}

/* === LYS MODUS — overstyrer === */
[data-theme="light"] {
    --bg-base:        #fafbfd;
    --bg-elevated:    #ffffff;
    --bg-card:        #ffffff;
    --bg-input:       #ffffff;
    --bg-overlay:     rgba(255,255,255,0.85);
    --bg-glass:       rgba(0,0,0,0.02);
    --chrome-bg:      #eef0f5;
    --chrome-border:  rgba(15,21,37,0.10);
    --main-bg:        #fafbfd;

    --border-subtle:  rgba(15,21,37,0.06);
    --border-default: rgba(15,21,37,0.10);
    --border-strong:  rgba(15,21,37,0.18);

    /* Lys modus — alle MOT --bg-card #ffffff gir minst 4.5:1 */
    --text-primary:   #0f1525;   /* 18.5:1 mot hvit */
    --text-secondary: #3a4458;   /* 10.6:1 mot hvit (var #4a5468 = 8.6) */
    --text-muted:     #525c70;   /*  7.7:1 mot hvit (var #6b7689 = 5.1, men 4.4 mot #fafbfd-ish) */
    --text-disabled:  #8089a0;   /* 4.0:1 — kun disabled UI */
    --text-inverse:   #ffffff;

    --shadow-xs:  0 1px 2px rgba(15,21,37,0.06);
    --shadow-sm:  0 1px 3px rgba(15,21,37,0.08), 0 1px 2px rgba(15,21,37,0.04);
    --shadow-md:  0 4px 8px rgba(15,21,37,0.08), 0 2px 4px rgba(15,21,37,0.04);
    --shadow-lg:  0 12px 24px rgba(15,21,37,0.10), 0 4px 8px rgba(15,21,37,0.06);
    --shadow-xl:  0 24px 48px rgba(15,21,37,0.12), 0 8px 16px rgba(15,21,37,0.08);

    /* Status-fg overstyringer i lys modus — mørkere skygge for AA-kontrast mot hvit/lys-tonet bg */
    --success-fg:     #047857;   /* var #10b981 = 2.27 mot lys bg — ny: ~5.6:1 */
    --warning-fg:     #b45309;   /* var #f59e0b = 1.87 mot hvit — ny: ~5.0:1 */
    --danger-fg:      #b91c1c;   /* var #ef4444 = 3.7 mot hvit — ny: ~6.4:1 */
    --info-fg:        #1d4ed8;   /* var #60a5fa = 2.6 — ny: ~7.6:1 */
}

/* === Lys modus via OS-preferanse — unngår JS-race-condition.
   Hvis brukeren har OS-preferanse=light og siden serveres med data-theme="dark",
   må disse tokens ALLEREDE være light før JS-toggle kjører.
   `:not([data-theme="dark"])` lar manuell dark-override (data-theme="dark") vinne. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg-base:        #fafbfd;
        --bg-elevated:    #ffffff;
        --bg-card:        #ffffff;
        --bg-input:       #ffffff;
        --bg-overlay:     rgba(255,255,255,0.85);
        --bg-glass:       rgba(0,0,0,0.02);
        --chrome-bg:      #eef0f5;
        --chrome-border:  rgba(15,21,37,0.10);
        --main-bg:        #fafbfd;
        --border-subtle:  rgba(15,21,37,0.06);
        --border-default: rgba(15,21,37,0.10);
        --border-strong:  rgba(15,21,37,0.18);
        --text-primary:   #0f1525;
        --text-secondary: #3a4458;
        --text-muted:     #525c70;
        --text-disabled:  #8089a0;
        --text-inverse:   #ffffff;
        --success-fg:     #047857;
        --warning-fg:     #b45309;
        --danger-fg:      #b91c1c;
        --info-fg:        #1d4ed8;
    }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}