/* =============================================================================
   1. SETTINGS & DESIGN TOKENS — STATE OF THE ART SYSTEM TOKENS
   ============================================================================= */

:root {
    /* --- PALETTE: SLATE (Neutral Scale) --- */
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;

    /* --- PALETTE: BLUE (Primary System Brand) --- */
    --blue-50:  #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;

    /* --- PALETTE: RED (Danger/Error) --- */
    --red-50:  #fef2f2;
    --red-100: #fee2e2;
    --red-500: #ef4444;
    --red-600: #dc2626;

    /* --- PALETTE: EMERALD (Success) --- */
    --emerald-50:  #ecfdf5;
    --emerald-500: #10b981;
    --emerald-700: #047857;

    /* --- SEMANTIC LIGHT COLOR MAPPING --- */
    --color-bg-app:       var(--slate-50);
    --color-bg-panel:     #ffffff;
    --color-bg-input:     var(--slate-100);
    --color-border:       var(--slate-200);
    --color-border-hov:   var(--slate-300);
    
    --color-text-main:    var(--slate-900);
    --color-text-body:    var(--slate-600);
    --color-text-mute:    var(--slate-400);
    
    --color-primary:      var(--blue-600);
    --color-primary-hov:  var(--blue-700);
    --color-primary-sub:  var(--blue-50);
    --color-primary-ring: rgba(37, 99, 235, 0.22);

    --color-danger:       var(--red-500);
    --color-white:        #ffffff;
    --color-black:        #000000;

    /* --- GLASS & BACKDROP SYSTEM --- */
    --glass-bg:           rgba(255, 255, 255, 0.82);
    --glass-border:       rgba(226, 232, 240, 0.8);
    --glass-blur:         20px;

    /* --- TYPOGRAPHY SYSTEM --- */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --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 */

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

    --lh-tight:    1.2;
    --lh-snug:     1.35;
    --lh-norm:     1.5;
    --lh-relaxed:  1.65;

    /* --- SPACING & GEOMETRY TOKENS --- */
    --header-h:    64px;
    --sidebar-w:   450px;
    --radius-sm:   0.375rem; /* 6px */
    --radius-md:   0.5rem;   /* 8px */
    --radius-lg:   0.75rem;  /* 12px */
    --radius-xl:   1rem;     /* 16px */
    --radius-full: 9999px;

    /* --- Z-INDEX HIERARCHY --- */
    --z-base:      1;
    --z-above:     10;
    --z-panel:     50;
    --z-header:    100;
    --z-overlay:   500;
    --z-modal:     1000;
    --z-toast:     2000;

    /* --- ELEVATION & SHADOW TOKENS --- */
    --shadow-xs:   0 1px 2px 0 rgba(15, 23, 42, 0.04);
    --shadow-sm:   0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
    --shadow-md:   0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --shadow-lg:   0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
    --shadow-xl:   0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
    --shadow-inner: inset 0 2px 4px 0 rgba(15, 23, 42, 0.04);
    --shadow-float: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 10px 10px -5px rgba(15, 23, 42, 0.06);

    /* --- TRANSITIONS & TIMINGS --- */
    --ease-out:     cubic-bezier(0, 0, 0.2, 1);
    --ease-in:      cubic-bezier(0.4, 0, 1, 1);
    --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:     150ms;
    --dur-norm:     250ms;
    --dur-slow:     500ms;

    /* --- RESUME DIMENSIONS (A4 PREACTION) --- */
    --a4-w:         210mm;
    --a4-h:         297mm;
    --a4-margin:    14mm;
    
    /* Dynamic Accent Variable Bindings */
    --resume-accent: #0f172a;
    --res-accent:    var(--resume-accent);
    --res-scale:     1;
}

/* --- DARK MODE SYSTEM OVERRIDES --- */
[data-theme="dark"] {
    --color-bg-app:       var(--slate-900);
    --color-bg-panel:     var(--slate-800);
    --color-bg-input:     var(--slate-700);
    --color-border:       var(--slate-700);
    --color-border-hov:   var(--slate-600);
    
    --color-text-main:    var(--slate-50);
    --color-text-body:    var(--slate-300);
    --color-text-mute:    var(--slate-400);

    --color-primary:      var(--blue-400);
    --color-primary-hov:  var(--blue-300);
    --color-primary-sub:  rgba(59, 130, 246, 0.18);
    --color-primary-ring: rgba(96, 165, 250, 0.3);

    --glass-bg:           rgba(30, 41, 59, 0.85);
    --glass-border:       rgba(255, 255, 255, 0.08);

    --shadow-sm:          0 1px 3px 0 rgba(0, 0, 0, 0.4);
    --shadow-md:          0 4px 8px -1px rgba(0, 0, 0, 0.5);
    --shadow-lg:          0 10px 18px -3px rgba(0, 0, 0, 0.6);
    --shadow-xl:          0 20px 30px -5px rgba(0, 0, 0, 0.7);
    --shadow-float:       0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
}