/* ============================================================
   DESIGN TOKENS — CSS Custom Properties
   ============================================================ */

:root {
    /* ---- Primary (overrideable) ---- */
    --primary: #758CB8;
    --primary-hover: #667DA8;
    --primary-active: #586E98;
    --primary-light: #E8EDF5;
    --primary-dark: #4A5F85;

    /* ---- Backgrounds (Light) ---- */
    --bg-primary: #F7F6F4;
    --bg-secondary: #F0EFED;
    --bg-surface: #FAF9F8;
    --bg-elevated: #FFFFFF;

    /* ---- Text (Light) ---- */
    --text-primary: #2C2A28;
    --text-secondary: #6A6865;
    --text-muted: #9A9895;
    --text-inverse: #FAF9F8;

    /* ---- Borders (Light) ---- */
    --border-color: #E8E6E3;
    --border-light: #F0EFED;

    /* ---- Semantic (Light) ---- */
    --success: #7BA88E;
    --warning: #C4A87A;
    --error: #B88383;
    --info: #8AA3B8;
    --neutral: #A8A8A8;

    /* ---- Badge Colors ---- */
    --badge-slate: #8A9BA8;
    --badge-teal: #7AA8A3;
    --badge-rose: #C49A9A;
    --badge-amber: #C4A87A;
    --badge-mint: #8AB89A;
    --badge-lavender: #A89AC4;
    --badge-sage: #9AAC8A;
    --badge-coral: #C48A8A;
    --badge-sky: #8AACB8;
    --badge-plum: #A88AB8;

    /* ---- Shadows ---- */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-4: 0 8px 16px rgba(0, 0, 0, 0.10);
    --shadow-5: 0 16px 32px rgba(0, 0, 0, 0.12);

    /* ---- Radii ---- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* ---- Spacing (8pt grid) ---- */
    --space-0: 0px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 56px;
    --space-11: 64px;
    --space-12: 80px;
    --space-13: 96px;

    /* ---- Fonts ---- */
    --font-en: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-ar: 'Noto Sans Arabic', 'Inter', -apple-system, sans-serif;

    /* ---- Transitions ---- */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* ---- Layout ---- */
    --navbar-height: 64px;
    --sidebar-width: 260px;
    --sidebar-collapsed: 68px;
}

/* ---- Dark Mode Variables ---- */
[data-theme="dark"] {
    --bg-primary: #1A1A1A;
    --bg-secondary: #262626;
    --bg-surface: #222222;
    --bg-elevated: #2A2A2A;
    --text-primary: #E8E6E3;
    --text-secondary: #A8A8A8;
    --text-muted: #787876;
    --text-inverse: #1A1A1A;
    --border-color: #333333;
    --border-light: #2A2A2A;
    --primary-light: #2A3344;
    --primary-dark: #758CB8;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.5);
    --shadow-4: 0 8px 16px rgba(0, 0, 0, 0.6);
    --shadow-5: 0 16px 32px rgba(0, 0, 0, 0.7);
    --badge-slate: #6A8A9A;
    --badge-teal: #5A9A95;
    --badge-rose: #B88A8A;
    --badge-amber: #B89A6A;
    --badge-mint: #6AAA8A;
    --badge-lavender: #9A8AB8;
    --badge-sage: #8A9A7A;
    --badge-coral: #B87A7A;
    --badge-sky: #7A9AAA;
    --badge-plum: #9A7AAA;
}