/* English comments are mandatory. */
/* Design tokens — CSS Custom Properties for the Slovoprav design system. */
/* Light theme is the default; dark theme activates via [data-theme="dark"]. */

/* ================================================================
   LIGHT THEME (default)
   ================================================================ */
:root {
    /* --- Surfaces --- */
    --bg-primary: #f8fafc;       /* Cool clean slate-50 */
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #f1f5f9;         /* Slate-100 */
    --bg-sidebar: #090d16;       /* Deep obsidian navy/charcoal for strong contrast */
    --bg-sidebar-hover: #111827; /* Slate-900 */
    --bg-sidebar-active: #1f2937;/* Slate-800 */

    /* --- Text --- */
    --text-primary: #0f172a;     /* Slate-900 - high contrast readability */
    --text-secondary: #334155;   /* Slate-700 - high contrast secondary text */
    --text-muted: #64748b;       /* Slate-500 - contrast ratio > 4.5:1 against white */
    --text-sidebar: #cbd5e1;     /* Slate-300 */
    --text-sidebar-active: #ffffff;

    /* --- Accent (Emerald Green) --- */
    --accent: #059669;           /* Emerald-600 - contrast ratio 4.9:1 against white */
    --accent-hover: #047857;     /* Emerald-700 */
    --accent-subtle: rgba(5, 150, 105, 0.08);
    --accent-text: #ffffff;

    /* --- Semantic --- */
    --success: #059669;
    --success-bg: rgba(5, 150, 105, 0.08);
    --success-text: #064e3b;
    --warning: #d97706;          /* Amber-600 for contrast against light bg */
    --warning-bg: rgba(217, 119, 6, 0.08);
    --warning-text: #78350f;
    --danger: #dc2626;           /* Red-600 for contrast */
    --danger-bg: rgba(220, 38, 38, 0.08);
    --danger-text: #7f1d1d;
    --info: #0284c7;             /* Sky-600 for contrast */
    --info-bg: rgba(2, 132, 199, 0.08);
    --info-text: #0c4a6e;

    /* --- Borders & Shadows --- */
    --border: #e2e8f0;           /* Slate-200 */
    --border-subtle: #f1f5f9;    /* Slate-100 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);

    /* --- Radii --- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* --- Typography --- */
    --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Commissioner', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.8125rem;  /* 13px */
    --font-size-base: 0.875rem; /* 14px */
    --font-size-md: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --line-height: 1.6;

    /* --- Spacing (consistent scale) --- */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */

    /* --- Layout --- */
    --sidebar-width: 260px;
    --sidebar-collapsed: 68px;
    --header-height: 60px;
    --content-max-width: 1200px;
    --transition: 0.2s ease;
    --transition-slow: 0.3s ease;
}

/* ================================================================
   DARK THEME
   ================================================================ */
[data-theme="dark"] {
    --bg-primary: #090a0f;       /* Matte obsidian black */
    --bg-secondary: #12131a;     /* Dark carbon */
    --bg-card: #1a1b24;          /* Slate carbon card */
    --bg-hover: #222431;
    --bg-sidebar: #090a0f;
    --bg-sidebar-hover: #12131a;
    --bg-sidebar-active: #1a1b24;

    --text-primary: #f3f4f6;     /* Light gray 100 */
    --text-secondary: #9ca3af;   /* Gray 400 */
    --text-muted: #6b7280;       /* Gray 500 */
    --text-sidebar: #9ca3af;
    --text-sidebar-active: #ffffff;

    /* --- Accent (Neon Mint/Emerald) --- */
    --accent: #10b981;           /* Glowing Emerald-500 */
    --accent-hover: #34d399;     /* Emerald-400 */
    --accent-subtle: rgba(16, 185, 129, 0.15);
    --accent-text: #022c22;      /* Ultra high-contrast dark green text for buttons! */

    /* --- Semantic --- */
    --success: #10b981;
    --success-bg: rgba(16, 185, 129, 0.12);
    --success-text: #34d399;
    --warning: #fbbf24;
    --warning-bg: rgba(245, 158, 11, 0.12);
    --warning-text: #fbbf24;
    --danger: #f87171;
    --danger-bg: rgba(239, 68, 68, 0.12);
    --danger-text: #f87171;
    --info: #22d3ee;
    --info-bg: rgba(6, 182, 212, 0.12);
    --info-text: #22d3ee;

    --border: #262936;           /* Graphite border */
    --border-subtle: #1d202b;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}