/*
 * Design-Tokens fuer Farben, Abstaende, Schatten und Themes.
 *
 * @package LeadershipCoachPortal
 */

:root {
    --font-sans: "Inter", "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --bg: #f5f7fb;
    --bg-soft: #eef1f8;
    --surface: #ffffff;
    --surface-2: #f8f9fd;
    --surface-3: #f1f3fa;
    --ink: #1f283e;
    --ink-soft: #3f4a63;
    --muted: #6f7c96;
    --line: #e6e9f2;
    --line-strong: #d7dceb;

    --brand: #7558ff;
    --brand-2: #21c8df;
    --brand-soft: rgba(117, 88, 255, 0.12);
    --brand-ink: #ffffff;

    --success: #2dce89;
    --success-soft: rgba(45, 206, 137, 0.14);
    --warning: #fb8c00;
    --warning-soft: rgba(251, 140, 0, 0.14);
    --danger: #f5365c;
    --danger-soft: rgba(245, 54, 92, 0.14);
    --info: #11cdef;
    --info-soft: rgba(17, 205, 239, 0.14);
    --violet: #7558ff;
    --violet-soft: rgba(117, 88, 255, 0.14);
    --cyan: #21c8df;
    --cyan-soft: rgba(33, 200, 223, 0.14);
    --orange: #fb6340;
    --orange-soft: rgba(251, 99, 64, 0.14);
    --blue: #3f7cff;
    --blue-soft: rgba(63, 124, 255, 0.14);

    --sidebar: #1a2035;
    --sidebar-2: #141727;
    --sidebar-ink: #ffffff;
    --sidebar-muted: #a9b1c7;
    --sidebar-active: rgba(255, 255, 255, 0.12);

    --grad-brand: linear-gradient(135deg, #7558ff 0%, #21c8df 100%);
    --grad-violet: linear-gradient(135deg, #825ee4 0%, #5e72e4 100%);
    --grad-cyan: linear-gradient(135deg, #21c8df 0%, #2dce89 100%);
    --grad-orange: linear-gradient(135deg, #fb6340 0%, #fbb140 100%);
    --grad-blue: linear-gradient(135deg, #3f7cff 0%, #21c8df 100%);
    --grad-danger: linear-gradient(135deg, #f5365c 0%, #fb6340 100%);
    --grad-sidebar: linear-gradient(180deg, #1f283e 0%, #141727 100%);

    --shadow-xs: 0 1px 2px rgba(20, 23, 39, 0.05);
    --shadow-sm: 0 2px 6px rgba(20, 23, 39, 0.06);
    --shadow-md: 0 8px 24px rgba(20, 23, 39, 0.08);
    --shadow-lg: 0 20px 60px rgba(20, 23, 39, 0.16);
    --shadow-brand: 0 10px 24px rgba(117, 88, 255, 0.28);

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    --container: 1440px;
    --sidebar-w: 264px;
    --topbar-h: 72px;
    --gap: 24px;
    --gap-sm: 12px;
    --gap-lg: 32px;

    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --speed: 180ms;
}

[data-theme="dark"] {
    --bg: #0f1423;
    --bg-soft: #141a2c;
    --surface: #171d31;
    --surface-2: #1b2238;
    --surface-3: #212a44;
    --ink: #eef1f8;
    --ink-soft: #c8cee0;
    --muted: #98a2bd;
    --line: #262f49;
    --line-strong: #33405f;

    --brand-soft: rgba(117, 88, 255, 0.2);
    --success-soft: rgba(45, 206, 137, 0.18);
    --warning-soft: rgba(251, 140, 0, 0.18);
    --danger-soft: rgba(245, 54, 92, 0.18);
    --info-soft: rgba(17, 205, 239, 0.18);
    --violet-soft: rgba(117, 88, 255, 0.2);
    --cyan-soft: rgba(33, 200, 223, 0.18);
    --orange-soft: rgba(251, 99, 64, 0.18);
    --blue-soft: rgba(63, 124, 255, 0.18);

    --sidebar: #0f1423;
    --sidebar-2: #0b1020;
    --sidebar-muted: #98a2bd;
    --sidebar-active: rgba(255, 255, 255, 0.09);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45);
}