/* ============================================
   Nordisk Designsystem — CSS Variables
   ============================================ */

:root {
    /* Named palette */
    --fjord: #1B2B3A;
    --stein: #6B7B8D;
    --snø: #FAFBFC;
    --kobber: #B87D4B;
    --bjørk: #F5F0EB;

    /* Semantic mapping (preserves JS compatibility with getCSSColor) */
    --primary: #1B2B3A;
    --primary-light: #2C3E50;
    --primary-dark: #0F1A24;
    --accent: #B87D4B;
    --accent-light: #D4956B;
    --accent-dark: #9A6838;

    /* Backgrounds */
    --bg-primary: #FAFBFC;
    --bg-secondary: #F5F0EB;
    --bg-tertiary: #FFFFFF;
    --bg-hover: #F0EBE5;

    /* Text */
    --text-primary: #1B2B3A;
    --text-secondary: #6B7B8D;
    --text-muted: #9CA3AF;
    --text-disabled: #D1D5DB;

    /* Borders */
    --border-light: #F0F0F0;
    --border: #E5E7EB;
    --border-dark: #D1D5DB;

    /* No shadows in Nordic design — borders only */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;

    /* Semantic colors */
    --color-success: #10B981;
    --color-success-bg: #ECFDF5;
    --color-danger: #EF4444;
    --color-danger-bg: #FEF2F2;
    --color-warning: #F59E0B;
    --color-warning-bg: #FFFBEB;
    --color-info: #3B82F6;
    --color-info-bg: #EFF6FF;

    /* Recovery colors (used by dashboard) */
    --color-recovery-high: #10B981;
    --color-recovery-mid: #F59E0B;
    --color-recovery-low: #EF4444;

    /* Spacing — 4px base unit */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-24: 96px;

    /* Legacy spacing aliases (used in existing HTML/JS) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Transitions */
    --transition: all 0.2s ease;
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-base: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    --font-3xl: 2rem;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
}

/* ============================================
   Dark Mode
   ============================================ */

[data-theme="dark"] {
    --fjord: #F0F2F5;
    --snø: #0D1117;
    --bjørk: #161B22;
    --kobber: #D4956B;

    --primary: #F0F2F5;
    --primary-light: #C9D1D9;
    --primary-dark: #FFFFFF;
    --accent: #D4956B;
    --accent-light: #E0A97D;
    --accent-dark: #B87D4B;

    --bg-primary: #0D1117;
    --bg-secondary: #161B22;
    --bg-tertiary: #1C2128;
    --bg-hover: #21262D;

    --text-primary: #F0F2F5;
    --text-secondary: #8B949E;
    --text-muted: #6E7681;
    --text-disabled: #484F58;

    --border-light: #21262D;
    --border: #30363D;
    --border-dark: #484F58;

    --color-success: #3FB950;
    --color-success-bg: #0D1117;
    --color-danger: #F85149;
    --color-danger-bg: #0D1117;
    --color-warning: #D29922;
    --color-warning-bg: #0D1117;
    --color-info: #58A6FF;
    --color-info-bg: #0D1117;

    --color-recovery-high: #3FB950;
    --color-recovery-mid: #D29922;
    --color-recovery-low: #F85149;
}