/* ════════════════════════════════
   CSS VARIABLES — Design tokens
   Loaded first, inherited by all CSS files.
════════════════════════════════ */

:root {
    /* ── Brand — Primary ── */
    --color-primary: #5B4BDB;
    --color-primary-light: #7B6FE8;
    --color-primary-dark: #3D2FB8;
    --color-primary-glow: rgba(91, 75, 219, 0.15);

    /* ── Legacy aliases (used by client-space) ── */
    --accent: #5B4BDB;
    --accent2: #7B6FE8;

    /* ── Semantic ── */
    --green: #5ecfae;
    --red: #FF6B8A;
    --orange: #FFB86C;
    --pink: #FF7EB3;

    /* ── Text ── */
    --color-text-primary: #0F0E1A;
    --color-text-secondary: #6B6880;
    --text: #0F0E1A;
    --muted: #6B6880;

    /* ── Background ── */
    --color-bg: #FFFFFF;
    --color-bg-subtle: #F8F7FF;
    --bg: #F8F7FF;

    /* ── Borders ── */
    --color-border: rgba(91, 75, 219, 0.15);

    /* ── Glassmorphism ── */
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.85);
    --glass-shadow: 0 8px 48px rgba(91, 75, 219, 0.08);
    --blur: blur(18px);

    /* ── Inputs ── */
    --input-bg: rgba(255, 255, 255, 0.7);
    --input-border: rgba(91, 75, 219, 0.18);
    --input-radius: 10px;

    /* ── Layout ── */
    --radius: 16px;
    --radius-sm: 12px;
    --radius-xs: 8px;

    /* ── Typography ── */
    --font-display: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* ── Gradients ── */
    --gradient-accent: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    --gradient-green: linear-gradient(135deg, var(--green), var(--color-primary));
    --gradient-red: linear-gradient(135deg, var(--red), var(--pink));

    /* ── Form ── */
    --required: #e06b8a;

    /* ── Admin sidebar ── */
    --sw: 240px;
}