:root {
  --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;   
  --font-sans:    'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-ar-display: 'Reem Kufi', 'Tajawal', 'Segoe UI', sans-serif; 
  --font-ar-sans:    'Tajawal', 'Cairo', 'Segoe UI', sans-serif;     
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  --text-2xs: 0.6875rem;  
  --text-xs:  0.75rem;    
  --text-sm:  0.8125rem;  
  --text-md:  0.875rem;   
  --text-base:0.9375rem;  
  --text-lg:  1.0625rem;  
  --text-xl:  1.375rem;   
  --text-2xl: 1.75rem;    
  --text-3xl: 2.25rem;    
  --text-4xl: 3rem;       
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;   
  --space-0:  0;
  --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;     
  --space-20: 5rem;     
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius:    14px;   
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --container:   1200px;
  --sidebar-w:   256px;
  --topbar-h:    60px;
  --field-h:     40px;   
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);      
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);         
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);  
  --dur-fast:   120ms;
  --dur:        180ms;
  --dur-slow:   260ms;
  --z-base: 0;
  --z-sticky: 100;
  --z-dropdown: 400;
  --z-modal: 1000;
  --z-toast: 1200;
  --z-tooltip: 1400;
}
:root,
[data-theme="light"] {
  color-scheme: light;
  --brand:        #4f46e5;  
  --brand-hover:  #4338ca;  
  --brand-active: #3730a3;  
  --brand-soft:   #eef2ff;  
  --brand-ink:    #ffffff;  
  --gold:         #b98a3e;  
  --gold-soft:    #faf3e6;
  --gold-ink:     #6b4e1e;
  --bg:           #f7f8fa;  
  --bg-subtle:    #f0f2f5;  
  --card:         #ffffff;  
  --card-hover:   #fbfbfd;
  --overlay:      rgba(15, 23, 42, 0.42); 
  --cream:        #f4eddd;  
  --ink:          #1e2430;  
  --ink-strong:   #0b1220;  
  --muted:        #5b6472;  
  --faint:        #8a94a3;  
  --on-brand:     #ffffff;
  --line:         #e6e9ef;  
  --line-strong:  #d4d9e2;  
  --field-bg:     #ffffff;
  --field-bg-disabled: #f2f4f7;
  --ring:         rgba(79, 70, 229, 0.35); 
  --ok:      #10864f;  --ok-soft:   #e7f6ee;  --ok-ink:   #0a6a3d;
  --warn:    #b7791f;  --warn-soft: #fdf4e3;  --warn-ink: #8a5a12;
  --down:    #d3372b;  --down-soft: #fdeceb;  --down-ink: #a52a20;
  --info:    #2563eb;  --info-soft: #e8f0fe;  --info-ink: #1d4ed8;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.12), 0 4px 8px rgba(16, 24, 40, 0.05);
  --shadow-focus: 0 0 0 3px var(--ring);
}
[data-theme="dark"] {
  color-scheme: dark;
  --brand:        #818cf8;  
  --brand-hover:  #a5b4fc;
  --brand-active: #c7d2fe;
  --brand-soft:   #1e2140;
  --brand-ink:    #0b1020;
  --gold:         #d4af7a;  
  --gold-soft:    #2a2417;
  --gold-ink:     #f2e4cb;
  --bg:           #0c0e14;  
  --bg-subtle:    #10131b;
  --card:         #161a24;  
  --card-hover:   #1c212d;
  --overlay:      rgba(0, 0, 0, 0.62);
  --cream:        #1a1712;
  --ink:          #e6e9f0;  
  --ink-strong:   #f5f7fb;
  --muted:        #a2acbd;  
  --faint:        #6b7688;
  --on-brand:     #0b1020;
  --line:         #232936;
  --line-strong:  #313a4b;
  --field-bg:     #10131b;
  --field-bg-disabled: #181c26;
  --ring:         rgba(129, 140, 248, 0.45);
  --ok:      #34d399;  --ok-soft:   #10281f;  --ok-ink:   #6ee7b7;
  --warn:    #fbbf68;  --warn-soft: #2a2113;  --warn-ink: #fcd9a0;
  --down:    #f87171;  --down-soft: #2b1616;  --down-ink: #fca5a5;
  --info:    #60a5fa;  --info-soft: #14243f;  --info-ink: #93c5fd;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-focus: 0 0 0 3px var(--ring);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --brand:#818cf8; --brand-hover:#a5b4fc; --brand-active:#c7d2fe; --brand-soft:#1e2140; --brand-ink:#0b1020;
    --gold:#d4af7a; --gold-soft:#2a2417; --gold-ink:#f2e4cb;
    --bg:#0c0e14; --bg-subtle:#10131b; --card:#161a24; --card-hover:#1c212d; --overlay:rgba(0,0,0,.62); --cream:#1a1712;
    --ink:#e6e9f0; --ink-strong:#f5f7fb; --muted:#a2acbd; --faint:#6b7688; --on-brand:#0b1020;
    --line:#232936; --line-strong:#313a4b; --field-bg:#10131b; --field-bg-disabled:#181c26; --ring:rgba(129,140,248,.45);
    --ok:#34d399; --ok-soft:#10281f; --ok-ink:#6ee7b7;
    --warn:#fbbf68; --warn-soft:#2a2113; --warn-ink:#fcd9a0;
    --down:#f87171; --down-soft:#2b1616; --down-ink:#fca5a5;
    --info:#60a5fa; --info-soft:#14243f; --info-ink:#93c5fd;
    --shadow-xs:0 1px 2px rgba(0,0,0,.4); --shadow-sm:0 1px 3px rgba(0,0,0,.5);
    --shadow-md:0 6px 16px rgba(0,0,0,.55); --shadow-lg:0 16px 40px rgba(0,0,0,.6);
    --shadow-focus:0 0 0 3px var(--ring);
  }
}