:root {
  /* Default theme: Blue */
  --primary:        #2563EB;
  --primary-50:     #EFF6FF;
  --primary-100:    #DBEAFE;
  --primary-200:    #BFDBFE;
  --primary-300:    #93C5FD;
  --primary-400:    #60A5FA;
  --primary-500:    #3B82F6;
  --primary-600:    #2563EB;
  --primary-700:    #1D4ED8;
  --primary-800:    #1E40AF;
  --primary-900:    #1E3A8A;
  --primary-hover:  #1D4ED8;
  --accent:         #0891B2;

  --success:        #059669;  --success-bg: #ECFDF5;  --success-border: #6EE7B7;
  --warning:        #D97706;  --warning-bg: #FFFBEB;  --warning-border: #FCD34D;
  --danger:         #DC2626;  --danger-bg:  #FEF2F2;  --danger-border:  #FCA5A5;
  --info:           #0891B2;  --info-bg:    #E0F2FE;  --info-border:    #7DD3FC;
  --archive:        #6B7280;  --archive-bg: #F3F4F6;  --archive-border: #D1D5DB;

  --text-success:   #065F46;  --text-warning: #92400E;
  --text-danger:    #991B1B;  --text-info:    #0C4A6E;

  --color-income:    #059669; --color-income-bg:  #ECFDF5;
  --color-expense:   #DC2626; --color-expense-bg: #FEF2F2;

  --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;

  --bg-app:      #F1F5F9;
  --bg-surface:  #FFFFFF;
  --bg-sidebar:  #FFFFFF;
  --bg-overlay:  rgba(15,23,42,.55);
  --bg-muted:    #F8FAFC;

  --text-primary:   #0F172A;
  --text-secondary: #475569;
  --text-muted:     #64748B;
  --text-inverse:   #FFFFFF;

  --border:            #E2E8F0;
  --border-strong:     #CBD5E1;
  --border-focus:      #0D9488;
  --border-focus-ring: rgba(13,148,136,.18);

  --sp-1:4px;  --sp-2:8px;   --sp-3:12px;  --sp-4:16px;
  --sp-5:20px; --sp-6:24px;  --sp-8:32px;  --sp-10:40px;
  --sp-12:48px;--sp-16:64px;

  --radius-xs:4px;  --radius-sm:6px;  --radius:10px;
  --radius-md:12px; --radius-lg:16px; --radius-xl:20px;
  --radius-2xl:24px;--radius-full:9999px;

  --shadow-xs:    0 1px 2px rgba(15,23,42,.05);
  --shadow-sm:    0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.05);
  --shadow:       0 4px 12px rgba(15,23,42,.08),0 2px 4px rgba(15,23,42,.04);
  --shadow-md:    0 6px 20px rgba(15,23,42,.10),0 3px 6px rgba(15,23,42,.06);
  --shadow-lg:    0 12px 32px rgba(15,23,42,.12),0 6px 12px rgba(15,23,42,.06);
  --shadow-dialog:0 24px 48px rgba(15,23,42,.18),0 8px 16px rgba(15,23,42,.08);
  --shadow-brand: 0 8px 24px rgba(13,148,136,.30);
  --card-shadow:        0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --card-shadow-hover:  0 4px 12px rgba(15,23,42,.08),0 2px 4px rgba(15,23,42,.04);

  --font: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono','Fira Code',monospace;

  --text-xs:   13px;
  --text-sm:   15px;
  --text-base: 17px;
  --text-md:   20px;
  --text-lg:   23px;
  --text-xl:   28px;
  --text-2xl:  33px;

  --weight-normal:400; --weight-medium:500;
  --weight-semi:600;   --weight-bold:700; --weight-extrabold:800;
  --leading-tight:1.3; --leading-normal:1.6; --leading-relaxed:1.8;

  --topbar-height:56px; --bottom-nav-height:72px;
  --sidebar-width:264px; --dialog-max-w:560px;

  --z-base:0; --z-above:10; --z-dropdown:100;
  --z-sticky:150; --z-overlay:200; --z-topbar:300; --z-dialog:400; --z-toast:600;

  --ease:200ms cubic-bezier(.4,0,.2,1);
  --ease-fast:120ms cubic-bezier(.4,0,.2,1);
  --ease-slow:300ms cubic-bezier(.4,0,.2,1);
  --ease-spring:380ms cubic-bezier(.34,1.56,.64,1);

  --touch-min:48px; --touch-lg:56px;
}

@media (min-width:768px) {
  :root {
    --text-xs:   12px;
    --text-sm:   13px;
    --text-base: 15px;
    --text-md:   17px;
    --text-lg:   20px;
    --bottom-nav-height:0px;
  }
}

[data-theme="dark"] {
  --bg-app:     #0B1426;
  --bg-surface: #102036;
  --bg-sidebar: #0F1B2E;
  --bg-overlay: rgba(0,0,0,.7);
  --bg-muted:   #0B1426;
  --text-primary:   #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-muted:     #94A3B8;
  --text-success:#6EE7B7; --text-warning:#FCD34D;
  --text-danger: #FCA5A5; --text-info:   #7DD3FC;
  --color-income:   #34D399; --color-income-bg: rgba(5,150,105,.18);
  --color-expense:  #F87171; --color-expense-bg:rgba(220,38,38,.18);
  --border:       #1E3A5F;
  --border-strong:#2A4D78;
  --primary-50:   rgba(37,99,235,.16);
  --primary-100:  rgba(37,99,235,.24);
  --success-bg:   rgba(5,150,105,.15);
  --warning-bg:   rgba(217,119,6,.15);
  --warning-border:rgba(217,119,6,.45);
  --danger-bg:    rgba(220,38,38,.15);
  --info-bg:      rgba(8,145,178,.15);
  --archive-bg:   rgba(107,114,128,.15);
  --card-shadow:  0 1px 3px rgba(0,0,0,.28);
  --card-shadow-hover:0 4px 14px rgba(0,0,0,.38);
  --shadow:       0 4px 12px rgba(0,0,0,.32);
  --shadow-lg:    0 12px 32px rgba(0,0,0,.42);
}

/* ═══ Color themes (data-color attribute on <html>) ═══ */
/* Blue is default (defined above in :root) */

[data-color="teal"] {
  --primary:        #0D9488;
  --primary-50:     #F0FDFA;
  --primary-100:    #CCFBF1;
  --primary-200:    #99F6E4;
  --primary-300:    #5EEAD4;
  --primary-400:    #2DD4BF;
  --primary-500:    #14B8A6;
  --primary-600:    #0D9488;
  --primary-700:    #0F766E;
  --primary-800:    #115E59;
  --primary-900:    #134E4A;
  --primary-hover:  #0F766E;
}
[data-theme="dark"][data-color="teal"] {
  --primary-50:   rgba(13,148,136,.16);
  --primary-100:  rgba(13,148,136,.24);
}

[data-color="green"] {
  --primary:        #059669;
  --primary-50:     #ECFDF5;
  --primary-100:    #D1FAE5;
  --primary-200:    #A7F3D0;
  --primary-300:    #6EE7B7;
  --primary-400:    #34D399;
  --primary-500:    #10B981;
  --primary-600:    #059669;
  --primary-700:    #047857;
  --primary-800:    #065F46;
  --primary-900:    #064E3B;
  --primary-hover:  #047857;
}
[data-theme="dark"][data-color="green"] {
  --primary-50:   rgba(5,150,105,.16);
  --primary-100:  rgba(5,150,105,.24);
}

[data-color="purple"] {
  --primary:        #7C3AED;
  --primary-50:     #F5F3FF;
  --primary-100:    #EDE9FE;
  --primary-200:    #DDD6FE;
  --primary-300:    #C4B5FD;
  --primary-400:    #A78BFA;
  --primary-500:    #8B5CF6;
  --primary-600:    #7C3AED;
  --primary-700:    #6D28D9;
  --primary-800:    #5B21B6;
  --primary-900:    #4C1D95;
  --primary-hover:  #6D28D9;
}
[data-theme="dark"][data-color="purple"] {
  --primary-50:   rgba(124,58,237,.16);
  --primary-100:  rgba(124,58,237,.24);
}