/* ============================
   DESIGN TOKENS
   Centralized theme variables.
   ============================ */

:root {
    /* Backgrounds */
    --color-bg: #12121a;
    --color-surface-1: #141421;
    --color-surface-2: #161626;
    --color-surface-3: #1a1a2a;
    --color-surface-4: #1b1b2b;
    --color-surface-5: #1e1e30;
    --color-surface-6: #232338;

    /* Text */
    --color-text: #ffffff;
    --color-text-secondary: #9aa0b5;
    --color-text-tertiary: #cfd3ff;
    --color-text-muted: #6b7290;

    /* Brand */
    --color-primary: #3f51b5;
    --color-primary-dark: #283593;
    --color-primary-light: #5c6bc0;
    --color-primary-hover: #3949ab;

    /* Semantic */
    --color-success: #4caf50;
    --color-success-dark: #2e7d32;
    --color-success-darker: #1b5e20;
    --color-success-light: #81c784;
    --color-danger: #e53935;
    --color-danger-dark: #b71c1c;
    --color-danger-mid: #952522;
    --color-warning: #ffc107;
    --color-info: #4fc3f7;
    --color-info-alt: #03a9f4;
    --color-orange: #ff9800;
    --color-orange-dark: #f57c00;
    --color-orange-darker: #ef6c00;
    --color-purple: #7e57c2;
    --color-purple-dark: #4527a0;
    --color-magenta-light: #ce93d8;

    /* Borders */
    --color-border: rgba(255,255,255,0.08);
    --color-border-light: rgba(255,255,255,0.06);
    --color-border-strong: rgba(255,255,255,0.12);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    --gradient-card: linear-gradient(180deg, var(--color-surface-5), var(--color-surface-2));
    --gradient-card-alt: linear-gradient(180deg, var(--color-surface-6), var(--color-surface-3));
    --gradient-sidebar: linear-gradient(180deg, var(--color-surface-4), var(--color-surface-1));
    --gradient-topbar: linear-gradient(180deg, var(--color-surface-5), #191928);
    --gradient-success: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    --gradient-success-alt: linear-gradient(135deg, #43a047, var(--color-success-darker));
    --gradient-danger: linear-gradient(135deg, var(--color-danger), var(--color-danger-dark));
    --gradient-danger-alt: linear-gradient(135deg, var(--color-danger), var(--color-danger-mid));
    --gradient-warning: linear-gradient(135deg, var(--color-orange), var(--color-orange-dark));
    --gradient-purple: linear-gradient(135deg, var(--color-purple), var(--color-purple-dark));

    /* Border Radius */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 14px;

    /* Shadows */
    --shadow-primary: 0 4px 12px rgba(63,81,181,0.45);
}