/**
 * RSD-Vote - CSS Custom Properties
 *
 * Zentrale Farbdefinitionen und Design-Tokens.
 * Unterstützt Light/Dark Theme und System-Präferenz.
 */

:root {
    /* ===== Brand Colors ===== */
    --color-primary: #e75421;
    --color-primary-light: #f16a3e;
    --color-primary-dark: #c64419;
    --color-primary-rgb: 231, 84, 33;
    --color-primary-alpha: rgba(231, 84, 33, 0.1);

    /* ===== Status Colors ===== */
    --color-success: #66bb6a;
    --color-success-light: #81c784;
    --color-success-dark: #4caf50;

    --color-error: #ef5350;
    --color-error-light: #e57373;
    --color-error-dark: #e53935;

    --color-warning: #ff9800;
    --color-warning-light: #ffb74d;
    --color-warning-dark: #f57c00;

    --color-info: #2196f3;
    --color-info-light: #64b5f6;
    --color-info-dark: #1976d2;
    --color-info-alpha: rgba(33, 150, 243, 0.1);

    /* ===== Additional Alpha Colors ===== */
    --color-success-alpha: rgba(102, 187, 106, 0.1);
    --color-error-alpha: rgba(239, 83, 80, 0.1);
    --color-warning-alpha: rgba(255, 152, 0, 0.1);

    /* ===== Light Theme (Default) ===== */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;

    --text-primary: #2c3e50;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    --text-inverse: #ffffff;

    --border-color: #e0e0e0;
    --border-color-light: #f0f0f0;
    --border-color-dark: #d0d0d0;

    --hover-bg: #f8f9fa;
    --active-bg: #e9ecef;

    /* ===== Shadows ===== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);

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

    /* ===== Spacing ===== */
    --spacing-0: 0;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;

    /* ===== Typography ===== */
    /* System font stack - keine externen Fonts, schnellste Ladezeit */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 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 */
    --font-size-4xl: 2.25rem;    /* 36px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;

    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;

    /* ===== Layout ===== */
    --container-max-width: 1400px;
    --container-max-width-lg: 1800px;
    --container-max-width-xl: 2200px;
    --sidebar-width: 280px;
    --navbar-height: 64px;

    /* ===== Form Elements ===== */
    --input-height: 40px;
    --input-height-sm: 32px;
    --input-height-lg: 48px;

    --button-height: 40px;
    --button-height-sm: 32px;
    --button-height-lg: 48px;

    /* ===== Transitions ===== */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;

    /* ===== Z-Index Scale ===== */
    --z-dropdown: 100;
    --z-sticky: 150;
    --z-fixed: 175;
    --z-modal-backdrop: 200;
    --z-modal: 250;
    --z-popover: 300;
    --z-tooltip: 350;
    --z-toast: 400;

    /* ===== Breakpoints (for reference in JS) ===== */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* ===== Dark Theme ===== */
[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #242424;
    --bg-tertiary: #2e2e2e;

    --text-primary: #e8e8e8;
    --text-secondary: #a0a0a0;
    --text-muted: #707070;
    --text-inverse: #1a1a1a;

    --border-color: #3a3a3a;
    --border-color-light: #2e2e2e;
    --border-color-dark: #4a4a4a;

    --hover-bg: #2e2e2e;
    --active-bg: #383838;

    /* Shadows für Dark Mode */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.35), 0 4px 6px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(0, 0, 0, 0.2);
}

/* ===== System Preference Detection ===== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: #1a1a1a;
        --bg-secondary: #242424;
        --bg-tertiary: #2e2e2e;

        --text-primary: #e8e8e8;
        --text-secondary: #a0a0a0;
        --text-muted: #707070;
        --text-inverse: #1a1a1a;

        --border-color: #3a3a3a;
        --border-color-light: #2e2e2e;
        --border-color-dark: #4a4a4a;

        --hover-bg: #2e2e2e;
        --active-bg: #383838;

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.25);
        --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.35), 0 4px 6px rgba(0, 0, 0, 0.25);
        --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(0, 0, 0, 0.2);
    }
}

/* ===== Focus Styles ===== */
:root {
    --focus-ring-color: rgba(231, 84, 33, 0.4);
    --focus-ring-offset: 2px;
    --focus-ring-width: 3px;
}

/* ===== Selection ===== */
::selection {
    background-color: rgba(var(--color-primary-rgb), 0.2);
    color: var(--text-primary);
}

/* ===== Scrollbar ===== */
:root {
    --scrollbar-width: 8px;
    --scrollbar-track: var(--bg-secondary);
    --scrollbar-thumb: var(--border-color);
    --scrollbar-thumb-hover: var(--text-secondary);
}