/* ============================================
   DESIGN SYSTEM — English with Jennie
   CSS Variables for theming & consistency
   ============================================ */

:root {
    /* === Primary Palette === */
    --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;

    /* === Accent (Emerald) === */
    --accent-50:  #ECFDF5;
    --accent-100: #D1FAE5;
    --accent-200: #A7F3D0;
    --accent-300: #6EE7B7;
    --accent-400: #34D399;
    --accent-500: #10B981;
    --accent-600: #059669;
    --accent-700: #047857;

    /* === Warm Accent (Amber) === */
    --warm-50:  #FFFBEB;
    --warm-100: #FEF3C7;
    --warm-200: #FDE68A;
    --warm-300: #FCD34D;
    --warm-400: #FBBF24;
    --warm-500: #F59E0B;
    --warm-600: #D97706;

    /* === Danger (Rose) === */
    --danger-50:  #FFF1F2;
    --danger-100: #FFE4E6;
    --danger-200: #FECDD3;
    --danger-300: #FDA4AF;
    --danger-400: #FB7185;
    --danger-500: #F43F5E;
    --danger-600: #E11D48;

    /* === Info (Sky) === */
    --info-50:  #F0F9FF;
    --info-100: #E0F2FE;
    --info-200: #BAE6FD;
    --info-300: #7DD3FC;
    --info-400: #38BDF8;
    --info-500: #0EA5E9;

    /* === Neutrals === */
    --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 Colors === */
    --bg-primary:    var(--gray-50);
    --bg-secondary:  #FFFFFF;
    --bg-tertiary:   var(--gray-100);
    --text-primary:  var(--gray-900);
    --text-secondary: var(--gray-600);
    --text-tertiary: var(--gray-400);
    --border-color:  var(--gray-200);
    --border-light:  var(--gray-100);

    /* === Sidebar === */
    --sidebar-bg:     var(--gray-900);
    --sidebar-text:   var(--gray-300);
    --sidebar-active: var(--primary-500);
    --sidebar-hover:  rgba(255, 255, 255, 0.08);
    --sidebar-width:  260px;
    --sidebar-collapsed: 72px;

    /* === Gradients === */
    --gradient-primary: linear-gradient(135deg, var(--primary-500) 0%, #8B5CF6 100%);
    --gradient-accent:  linear-gradient(135deg, var(--accent-500) 0%, #06B6D4 100%);
    --gradient-warm:    linear-gradient(135deg, var(--warm-500) 0%, #F97316 100%);
    --gradient-danger:  linear-gradient(135deg, var(--danger-500) 0%, #EC4899 100%);
    --gradient-hero:    linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* === Shadows === */
    --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);
    --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);

    /* === Glass === */
    --glass-bg:     rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-blur:   12px;

    /* === Radius === */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    /* === Typography === */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs:   0.75rem;
    --font-size-sm:   0.875rem;
    --font-size-base: 1rem;
    --font-size-lg:   1.125rem;
    --font-size-xl:   1.25rem;
    --font-size-2xl:  1.5rem;
    --font-size-3xl:  1.875rem;
    --font-size-4xl:  2.25rem;

    /* === Spacing === */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* === Transitions === */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast:   150ms;
    --duration-normal: 250ms;
    --duration-slow:   400ms;

    /* === Z-index === */
    --z-sidebar:  100;
    --z-header:   90;
    --z-modal:    200;
    --z-overlay:  190;
    --z-toast:    300;
    --z-tooltip:  250;
}

/* === Dark Mode Override (future) === */
[data-theme="dark"] {
    --bg-primary:    var(--gray-950);
    --bg-secondary:  var(--gray-900);
    --bg-tertiary:   var(--gray-800);
    --text-primary:  var(--gray-50);
    --text-secondary: var(--gray-400);
    --text-tertiary: var(--gray-500);
    --border-color:  var(--gray-700);
    --border-light:  var(--gray-800);
    --glass-bg:      rgba(15, 23, 42, 0.8);
    --glass-border:  rgba(51, 65, 85, 0.5);
    --shadow-glow:   0 0 20px rgba(99, 102, 241, 0.2);
}