/**
 * Design Tokens — منبع واحد رنگ، تایپوگرافی، فاصله و لایه‌بندی
 * Brand: بنفش سامانه آموزش حامی (#667eea → #764ba2)
 * معنایی: success / warning / danger باید قابل تشخیص و با کنتراست کافی باشند
 */
:root {
    /* Brand / Primary */
    --color-primary: #5b6fe0;
    --color-primary-dark: #4a5bc7;
    --color-primary-light: #7b8ef0;
    --color-primary-rgb: 91, 111, 224;

    --color-secondary: #64748b;
    --color-secondary-dark: #475569;
    --color-secondary-light: #94a3b8;

    /* Semantic — readable, not decorative pastels */
    --color-success: #0d9488;
    --color-success-dark: #0f766e;
    --color-success-light: #2dd4bf;

    --color-danger: #dc2626;
    --color-danger-dark: #b91c1c;
    --color-danger-light: #f87171;

    --color-warning: #d97706;
    --color-warning-dark: #b45309;
    --color-warning-light: #fbbf24;

    --color-info: #0284c7;
    --color-info-dark: #0369a1;
    --color-info-light: #38bdf8;

    /* Surfaces & text */
    --color-text-main: #1e293b;
    --color-text-muted: #64748b;
    --color-bg: #ffffff;
    --color-bg-subtle: #f8fafc;
    --color-bg-card: #ffffff;
    --color-border: #e2e8f0;
    --color-surface-dark: #1e293b;

    /* Spacing scale (4px base) */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-xxl: 3rem;

    /* Typography */
    --font-family-main: 'IRANSans', 'Tahoma', sans-serif;
    --font-size-base: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.125rem;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --font-size-xs: 0.75rem;
    --font-size-xl: 1.25rem;
    --font-size-xxl: 1.5rem;
    --font-size-xxxl: 2rem;
    --font-weight-light: 300;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --line-height-base: 1.6;
    --line-height-tight: 1.25;
    --line-height-loose: 1.75;

    /* Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-token-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-token-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-token-lg: 0 10px 24px rgba(15, 23, 42, 0.1);

    /* Gradients */
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --success-gradient: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);

    /* Aliases used across legacy CSS */
    --primary-color: var(--color-primary);
    --primary-dark: var(--color-primary-dark);
    --primary-light: var(--color-primary-light);
    --secondary-color: var(--color-secondary);
    --secondary-dark: var(--color-secondary-dark);
    --secondary-light: var(--color-secondary-light);
    --success-color: var(--color-success);
    --success-dark: var(--color-success-dark);
    --success-light: var(--color-success-light);
    --danger-color: var(--color-danger);
    --danger-dark: var(--color-danger-dark);
    --danger-light: var(--color-danger-light);
    --warning-color: var(--color-warning);
    --warning-dark: var(--color-warning-dark);
    --warning-light: var(--color-warning-light);
    --info-color: var(--color-info);
    --info-dark: var(--color-info-dark);
    --info-light: var(--color-info-light);

    --dark-color: var(--color-text-main);
    --dark-dark: #0f172a;
    --dark-light: #334155;
    --light-color: var(--color-bg-subtle);
    --light-dark: #e2e8f0;
    --light-light: #ffffff;

    --spacing-xs: var(--space-xs);
    --spacing-sm: var(--space-sm);
    --spacing-md: var(--space-md);
    --spacing-lg: var(--space-lg);
    --spacing-xl: var(--space-xl);
    --spacing-xxl: var(--space-xxl);

    --font-family-base: var(--font-family-main);
    --font-family-primary: var(--font-family-main);

    --border-radius-sm: 0.25rem;
    --border-radius-md: var(--radius-sm);
    --border-radius-lg: var(--radius-md);
    --border-radius-xl: var(--radius-lg);
    --border-radius-full: 50%;

    --shadow-sm: var(--shadow-token-sm);
    --shadow-md: var(--shadow-token-md);
    --shadow-lg: var(--shadow-token-lg);
    --shadow-xl: 0 20px 25px rgba(15, 23, 42, 0.12);

    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.35s ease;

    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    --z-index-toast: 1080;
    --z-index-onboarding: 9999;

    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;

    /* Layout shell */
    --navbar-height: 70px;
    --footer-height: 60px;
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 80px;
    --content-padding: 1.5rem;
    --touch-target-min: 44px;
}

[data-theme="dark"],
.dark-mode {
    --color-primary: #8b5cf6;
    --color-primary-dark: #7c3aed;
    --color-primary-light: #a78bfa;
    --color-primary-rgb: 139, 92, 246;

    --color-secondary: #94a3b8;
    --color-success: #34d399;
    --color-danger: #f87171;
    --color-warning: #fbbf24;
    --color-info: #38bdf8;

    --color-text-main: #f8fafc;
    --color-text-muted: #94a3b8;
    --color-bg: #0f172a;
    --color-bg-subtle: #1e293b;
    --color-bg-card: #1e293b;
    --color-border: #334155;

    --color-primary-dark: #7c3aed;
    --color-primary-light: #a78bfa;
    --color-secondary-dark: #64748b;
    --color-secondary-light: #cbd5e1;
    --color-success-dark: #10b981;
    --color-success-light: #6ee7b7;
    --color-danger-dark: #ef4444;
    --color-danger-light: #fca5a5;
    --color-warning-dark: #f59e0b;
    --color-warning-light: #fde68a;
    --color-info-dark: #0ea5e9;
    --color-info-light: #7dd3fc;

    --primary-color: var(--color-primary);
    --secondary-color: var(--color-secondary);
    --success-color: var(--color-success);
    --danger-color: var(--color-danger);
    --warning-color: var(--color-warning);
    --info-color: var(--color-info);
    --primary-dark: var(--color-primary-dark);
    --primary-light: var(--color-primary-light);
    --secondary-dark: var(--color-secondary-dark);
    --secondary-light: var(--color-secondary-light);
    --success-dark: var(--color-success-dark);
    --success-light: var(--color-success-light);
    --danger-dark: var(--color-danger-dark);
    --danger-light: var(--color-danger-light);
    --warning-dark: var(--color-warning-dark);
    --warning-light: var(--color-warning-light);
    --info-dark: var(--color-info-dark);
    --info-light: var(--color-info-light);

    --dark-color: #0f172a;
    --dark-dark: #020617;
    --dark-light: #334155;
    --light-color: #1e293b;
    --light-dark: #0f172a;
    --light-light: #334155;

    --primary-gradient: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
}