/* ============================================
   Design Tokens - VersaTutor Platform
   Premium Design System 2026
   ============================================ */

   :root {
    /* ── Primary Palette (Deep Indigo → Violet) ── */
    --primary-50:  #eef2ff;
    --primary-100: #e0e7ff;
    --primary-200: #c7d2fe;
    --primary-300: #a5b4fc;
    --primary-400: #818cf8;
    --primary-500: #6366f1;
    --primary-600: #4f46e5;
    --primary-700: #4338ca;
    --primary-800: #3730a3;
    --primary-900: #312e81;
    --primary:     #6366f1;
    --primary-dark: #4f46e5;

    /* ── Accent (Persimmon / Warm Orange) ── */
    --accent-50:  #fff7ed;
    --accent-100: #ffedd5;
    --accent-200: #fed7aa;
    --accent-300: #fdba74;
    --accent-400: #fb923c;
    --accent-500: #f97316;
    --accent-600: #ea580c;
    --accent:     #f97316;

    /* ── Jade (Sophisticated Green) ── */
    --jade-50:  #ecfdf5;
    --jade-100: #d1fae5;
    --jade-200: #a7f3d0;
    --jade-300: #6ee7b7;
    --jade-400: #34d399;
    --jade-500: #10b981;
    --jade-600: #059669;
    --jade-700: #047857;
    --jade:     #10b981;

    /* ── Success ── */
    --success-50:  #ecfdf5;
    --success-100: #d1fae5;
    --success-500: #10b981;
    --success-600: #059669;
    --success-700: #047857;
    --success:     #10b981;

    /* ── Warning ── */
    --warning-50:  #fffbeb;
    --warning-100: #fef3c7;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning:     #f59e0b;

    /* ── Danger ── */
    --danger-50:  #fef2f2;
    --danger-100: #fee2e2;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;
    --danger:     #ef4444;

    /* ── Info (Cool Blue) ── */
    --info-50:  #eff6ff;
    --info-100: #dbeafe;
    --info-500: #3b82f6;
    --info-600: #2563eb;
    --info:     #3b82f6;

    /* ── Plum (Deep Purple) ── */
    --plum-50:  #faf5ff;
    --plum-100: #f3e8ff;
    --plum-500: #a855f7;
    --plum-600: #9333ea;
    --plum-700: #7e22ce;
    --plum:     #a855f7;

    /* ── Neutral Gray Scale ── */
    --gray-50:  #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --gray-950: #020617;

    /* ── Semantic Aliases ── */
    --text-primary:   var(--gray-900);
    --text-secondary: var(--gray-600);
    --text-muted:     var(--gray-400);
    --bg-body:        #f0f2f5;
    --bg-surface:     #ffffff;
    --bg-hover:       var(--gray-50);
    --border-color:   var(--gray-200);
    --border-light:   var(--gray-100);

    /* ── Gradient Tokens ── */
    --gradient-primary:   linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);
    --gradient-hero:      linear-gradient(135deg, #1e1b4b 0%, #312e81 25%, #4338ca 50%, #6366f1 75%, #818cf8 100%);
    --gradient-sidebar:   linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    --gradient-accent:    linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
    --gradient-jade:      linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
    --gradient-danger:    linear-gradient(135deg, #dc2626 0%, #ef4444 50%, #f87171 100%);
    --gradient-glass:     linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    --gradient-card-glow: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(139,92,246,0.04) 100%);
    --gradient-mesh:      radial-gradient(at 40% 20%, rgba(99,102,241,0.20) 0%, transparent 50%), radial-gradient(at 80% 0%, rgba(139,92,246,0.14) 0%, transparent 50%), radial-gradient(at 0% 50%, rgba(16,185,129,0.11) 0%, transparent 50%), radial-gradient(at 70% 85%, rgba(249,115,22,0.07) 0%, transparent 40%);

    /* ── Glassmorphism Tokens ── */
    --glass-bg:       rgba(255, 255, 255, 0.7);
    --glass-bg-dark:  rgba(255, 255, 255, 0.05);
    --glass-border:   rgba(255, 255, 255, 0.2);
    --glass-blur:     16px;
    --glass-blur-sm:  8px;
    --glass-blur-lg:  24px;

    /* ── Spacing Scale (4px base) ── */
    --space-0:  0;
    --space-px: 1px;
    --space-1:  0.25rem;   /* 4px */
    --space-2:  0.5rem;    /* 8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */

    /* ── Typography Scale ── */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --text-xs:   0.75rem;     /* 12px */
    --text-sm:   0.875rem;    /* 14px */
    --text-base: 1rem;        /* 16px */
    --text-lg:   1.125rem;    /* 18px */
    --text-xl:   1.25rem;     /* 20px */
    --text-2xl:  1.5rem;      /* 24px */
    --text-3xl:  1.875rem;    /* 30px */
    --text-4xl:  2.25rem;     /* 36px */
    --text-5xl:  3rem;        /* 48px */
    --text-6xl:  3.75rem;     /* 60px */

    --font-normal:    400;
    --font-medium:    500;
    --font-semibold:  600;
    --font-bold:      700;
    --font-extrabold: 800;

    --leading-none:    1;
    --leading-tight:   1.25;
    --leading-snug:    1.375;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;
    --leading-loose:   2;

    --tracking-tight:  -0.025em;
    --tracking-normal: 0em;
    --tracking-wide:   0.05em;
    --tracking-wider:  0.08em;

    /* ── Border Radius ── */
    --radius-sm:   0.375rem;  /* 6px */
    --radius-md:   0.5rem;    /* 8px */
    --radius-lg:   0.75rem;   /* 12px */
    --radius-xl:   1rem;      /* 16px */
    --radius-2xl:  1.5rem;    /* 24px */
    --radius-full: 9999px;

    /* ── Shadows (with colored variants) ── */
    --shadow-xs:   0 1px 2px 0 rgba(0, 0, 0, 0.07);
    --shadow-sm:   0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px -1px rgba(0, 0, 0, 0.08);
    --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.12), 0 2px 4px -2px rgba(0, 0, 0, 0.08);
    --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
    --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
    --shadow-2xl:  0 25px 50px -12px rgba(0, 0, 0, 0.22);

    /* Colored shadows */
    --shadow-primary:  0 4px 14px 0 rgba(99, 102, 241, 0.25);
    --shadow-primary-lg: 0 10px 30px 0 rgba(99, 102, 241, 0.3);
    --shadow-accent:   0 4px 14px 0 rgba(249, 115, 22, 0.25);
    --shadow-jade:     0 4px 14px 0 rgba(16, 185, 129, 0.25);
    --shadow-danger:   0 4px 14px 0 rgba(239, 68, 68, 0.25);
    --shadow-plum:     0 4px 14px 0 rgba(168, 85, 247, 0.25);

    /* Card hover glow */
    --shadow-card-hover: 0 8px 30px rgba(99, 102, 241, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);

    /* ── Transitions ── */
    --transition-fast:    150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal:  250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:    350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring:  500ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-bounce:  600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ── Layout ── */
    --sidebar-width: 272px;
    --sidebar-collapsed: 0px;
    --topbar-height: 64px;
    --content-max-width: 1400px;

    /* ── Z-Index Scale ── */
    --z-base:     1;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  999;
    --z-sidebar:  1000;
    --z-modal:    10000;
    --z-toast:    11000;
}

/* ── Dark Theme ── */
[data-theme="dark"] {
    --text-primary:   #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted:     #94a3b8;
    --bg-body:        #0f172a;
    --bg-surface:     #1e293b;
    --bg-hover:       #1e293b;
    --border-color:   #2a3549;
    --border-light:   #1e293b;

    /* card & topbar surface */
    --surface:    #1e293b;
    --surface-2:  #151e2e;
    --text:       #e4e6f0;
    --border:     #2a3549;

    /* shadow adjustments */
    --shadow-sm:  0 1px 3px 0 rgba(0,0,0,0.4), 0 1px 2px -1px rgba(0,0,0,0.4);
    --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.3);
    --shadow-card-hover: 0 8px 30px rgba(99,102,241,0.2), 0 4px 12px rgba(0,0,0,0.3);
}