/*
|--------------------------------------------------------------------------
| VARIABLES.CSS
|--------------------------------------------------------------------------
|
| Zentrale Design-Tokens für wooti.tv.
|
| Farben, Typografie, Abstände, Radien, Schatten und Bewegungswerte werden
| hier einmal definiert und von den übrigen Stylesheets wiederverwendet.
|
*/

:root {

    /*
    |--------------------------------------------------------------------------
    | Farben
    |--------------------------------------------------------------------------
    */

    --color-background: #0a0a14;
    --color-surface: #111122;
    --color-surface-elevated: #17172b;
    --color-surface-translucent: rgba(10, 10, 20, 0.92);

    --color-text: #f7f7fb;
    --color-text-muted: #b8b8c8;
    --color-on-accent: #0a0a14;

    --color-primary: #8b5cf6;
    --color-primary-hover: #a78bfa;
    --color-primary-soft: rgba(139, 92, 246, 0.12);
    --color-primary-glow: rgba(139, 92, 246, 0.18);

    --color-secondary: #3b82f6;
    --color-secondary-hover: #60a5fa;
    --color-secondary-soft: rgba(59, 130, 246, 0.12);

    --color-border: rgba(255, 255, 255, 0.10);
    --color-border-strong: rgba(255, 255, 255, 0.16);

    --color-success: #34d399;
    --color-warning: #fbbf24;
    --color-danger: #f87171;
    --color-danger-hover: #ef4444;

    /*
    |--------------------------------------------------------------------------
    | Typografie
    |--------------------------------------------------------------------------
    */

    --font-primary: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-monospace: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --font-size-small: 0.875rem;
    --font-size-base: 1rem;
    --font-size-large: 1.125rem;

    --line-height-tight: 1.2;
    --line-height-base: 1.6;
    --line-height-relaxed: 1.7;

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

    /*
    |--------------------------------------------------------------------------
    | Abstände
    |--------------------------------------------------------------------------
    */

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    --content-width: 1280px;

    /*
    |--------------------------------------------------------------------------
    | Border Radius
    |--------------------------------------------------------------------------
    */

    --radius-small: 0.5rem;
    --radius-medium: 0.75rem;
    --radius-large: 1rem;
    --radius-xlarge: 1.5rem;
    --radius-2xlarge: 2rem;
    --radius-pill: 999px;

    /*
    |--------------------------------------------------------------------------
    | Schatten
    |--------------------------------------------------------------------------
    */

    --shadow-small: 0 8px 24px rgba(0, 0, 0, 0.18);
    --shadow-medium: 0 18px 50px rgba(0, 0, 0, 0.30);
    --shadow-large: 0 24px 80px rgba(0, 0, 0, 0.22);

    /*
    |--------------------------------------------------------------------------
    | Animationen
    |--------------------------------------------------------------------------
    */

    --motion-duration-fast: 160ms;
    --motion-duration-base: 280ms;
    --motion-duration-slow: 650ms;
    --motion-duration-idle: 4200ms;

    --motion-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);

    --motion-distance-small: 4px;
    --motion-distance-medium: 20px;

    /*
    |--------------------------------------------------------------------------
    | Z-Index
    |--------------------------------------------------------------------------
    */

    --z-base: 0;
    --z-header: 1000;
    --z-skip-link: 9999;

    /*
    |--------------------------------------------------------------------------
    | Breakpoints
    |--------------------------------------------------------------------------
    |
    | Dokumentationswerte. CSS Custom Properties können nicht direkt als
    | Media-Query-Grenzen verwendet werden; die Stylesheets verwenden daher
    | weiterhin dieselben festen Werte.
    |
    */

    --breakpoint-small: 480px;
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
}