/*
 * Design-Tokens der Hosting-Control-Website.
 * Farben orientieren sich bewusst an der Produktoberfläche
 * (resources/scss/_variables.scss im Hosting-Control-Projekt), damit
 * Website und Panel wie ein System wirken.
 */

:root {
    /* Marke */
    --color-primary: #e36302;
    --color-primary-strong: #c25502;
    --color-primary-soft: #fdf1e6;
    --color-ink: #031d5b;

    /* Neutrale Flächen (Light) */
    --color-background: #f7f8fc;
    --color-surface: #ffffff;
    --color-surface-alt: #f4f6fb;
    --color-text: #1a2036;
    --color-muted: #5b6478;
    --color-border: rgba(3, 29, 91, 0.1);

    /* Dunkle Sektionen */
    --color-dark-bg: #0b1226;
    --color-dark-surface: #131c36;
    --color-dark-surface-alt: #1a2544;
    --color-dark-text: #eef1fb;
    --color-dark-muted: #9aa6c7;
    --color-dark-border: rgba(255, 255, 255, 0.1);

    /* Statusfarben */
    --color-success: #16a34a;
    --color-info: #0ea5e9;
    --color-warning: #d97706;
    --color-danger: #dc2626;

    /* Typografie */
    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Radien */
    --radius-sm: 0.45rem;
    --radius-md: 0.65rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-pill: 999px;

    /* Abstände */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --space-6: 4rem;
    --space-7: 6rem;
    --space-8: 8rem;

    /* Layout */
    --container-width: 1200px;
    --container-padding: 1.5rem;
    --header-height: 76px;

    /* Schatten */
    --shadow-sm: 0 1px 2px rgba(3, 29, 91, 0.06);
    --shadow-md: 0 2px 6px rgba(3, 29, 91, 0.04), 0 18px 40px -24px rgba(3, 29, 91, 0.25);
    --shadow-lg: 0 4px 12px rgba(3, 29, 91, 0.06), 0 30px 60px -28px rgba(3, 29, 91, 0.35);

    color-scheme: light;
}