/* WAF Manager - CSS Variables (Kokiris Brand) */
:root {
    /* Colors - Kokiris identity */
    --color-bg: #060a12;
    --color-bg-secondary: #0c1220;
    --color-bg-tertiary: #1d2633;
    --color-bg-input: #0a1019;
    --color-text: #e0e6ed;
    --color-text-muted: #5a6a7e;
    --color-border: #1e2a3a;

    /* Accent colors */
    --color-primary: #c5432e;
    --color-primary-hover: #d4503d;
    --color-primary-glow: rgba(197, 67, 46, 0.15);
    --color-success: #2ed573;
    --color-warning: #ffa502;
    --color-danger: #ff4757;
    --color-info: #a78bfa;

    /* Nav groups */
    --color-nav-group: #3d4f65;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Border radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);

    /* Sidebar */
    --sidebar-width: 200px;
    --topbar-height: 60px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
}

/* Light theme - explicit user choice */
[data-theme="light"] {
    --color-bg: #f5f3f0;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #e8e4df;
    --color-bg-input: #f0ede8;
    --color-text: #1a1a2e;
    --color-text-muted: #6b6577;
    --color-border: #d5d0c8;
    --color-nav-group: #8a8494;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.12);
}

/* Light theme - OS preference when no explicit choice */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --color-bg: #f5f3f0;
        --color-bg-secondary: #ffffff;
        --color-bg-tertiary: #e8e4df;
        --color-bg-input: #f0ede8;
        --color-text: #1a1a2e;
        --color-text-muted: #6b6577;
        --color-border: #d5d0c8;
        --color-nav-group: #8a8494;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
        --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.12);
    }
}