:root {
  --blue: #5A93FF;
  --cyan: #67E8FF;
  --violet: #8566FF;
  --pink: #FF60CA;
  --magenta: #D65BFF;
  --teal: #37D6D0;
  --lime: #D8FF7B;
  --gold: #F5D96E;
  --wgreen: #6BE18A;
  --danger: #FF7AA2;
  --gem-gradient: linear-gradient(120deg, var(--cyan), var(--blue), var(--violet), var(--pink), var(--cyan));
  --on-accent: #071019;
  --font-ar: "Cairo", sans-serif;
  --font-en: "Space Grotesk", sans-serif;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;
  --sidebar: 276px;
  --nav-h: 64px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: .16s;
  --dur: .22s;
  --dur-slow: .34s;

  /* Dark is the default WAKKEL theme */
  --bg: #070915;
  --bg-2: #0B0F20;
  --bg-mid: #0A0F1D;
  --panel: #10152A;
  --panel-2: #0F1324;
  --panel-3: #151A31;
  --text: #EDF3FF;
  --muted: #B3BDD9;
  --muted-2: #8E9ABA;
  --stroke: rgba(255, 255, 255, .09);
  --stroke-2: rgba(255, 255, 255, .15);
  --glass: rgba(255, 255, 255, .05);
  --glass-2: rgba(255, 255, 255, .03);
  --shadow: 0 22px 48px rgba(0, 0, 0, .38);
  --shadow-soft: 0 14px 32px rgba(0, 0, 0, .24);
  --glow-cyan: 0 0 0 1px rgba(103, 232, 255, .16), 0 10px 28px rgba(90, 147, 255, .12);
  --aurora-1: rgba(90, 147, 255, .14);
  --aurora-2: rgba(103, 232, 255, .07);
  --aurora-3: rgba(133, 102, 255, .06);
  --accent: var(--cyan);
  --accent-ink: #67E8FF;
  --nav-fg: #BBC8E6;
  --nav-hover-bg: rgba(255, 255, 255, .05);
  --nav-hover-fg: #ffffff;
  --nav-active-bg: linear-gradient(120deg, rgba(103, 232, 255, .12), rgba(90, 147, 255, .08));
  --nav-active-border: rgba(103, 232, 255, .28);
  --input-bg: rgba(7, 9, 21, .62);
  --overlay: rgba(4, 6, 16, .72);
  --scrim: rgba(0, 0, 0, .52);
  --card-bg: rgba(16, 21, 42, .9);
  --card-bg-2: rgba(15, 19, 36, .82);
  --auth-bg: rgba(16, 21, 42, .94);
  --auth-bg-2: rgba(15, 19, 36, .88);
  --sidebar-bg: rgba(10, 14, 30, .9);
  --topbar-bg: rgba(7, 9, 21, .62);
  --bubble-user: linear-gradient(160deg, rgba(90, 147, 255, .22), rgba(103, 232, 255, .1));
  --bubble-agent: rgba(16, 21, 42, .92);
  --bubble-system: rgba(245, 217, 110, .08);
  --ghost-bg: rgba(255, 255, 255, .03);
  --ghost-border: rgba(103, 232, 255, .2);
  --ok-bg: rgba(107, 225, 138, .08);
  --ok-border: rgba(107, 225, 138, .28);
  --warn-bg: rgba(245, 217, 110, .08);
  --warn-border: rgba(245, 217, 110, .28);
  --info-bg: rgba(103, 232, 255, .06);
  --info-border: rgba(103, 232, 255, .22);
  --err-bg: rgba(255, 122, 162, .08);
  --err-border: rgba(255, 122, 162, .28);
  --warn-item-bg: rgba(245, 217, 110, .05);
  --warn-item-border: rgba(245, 217, 110, .2);
  --step-done-border: rgba(107, 225, 138, .25);
  --chart-grid: rgba(255, 255, 255, .08);
  --chart-axis: #8E9ABA;
  --chart-series-1: #67E8FF;
  --chart-series-2: #5A93FF;
  --chart-series-3: #8566FF;
  --theme-color: #070915;
  --scrollbar: rgba(255, 255, 255, .18);
  --shimmer: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .06) 40%, transparent 60%);

  --bg-app: var(--bg);
  --bg-surface: var(--panel);
  --bg-elevated: var(--panel-3);
  --text-primary: var(--text);
  --text-secondary: var(--muted-2);
  --border: var(--stroke);
}

html[data-theme="light"] {
  --bg: #EEF2FF;
  --bg-2: #E4EAF8;
  --bg-mid: #E8EDFA;
  --panel: #FFFFFF;
  --panel-2: #F5F7FF;
  --panel-3: #FFFFFF;
  --text: #121A33;
  --muted: #3F4C6A;
  --muted-2: #5A5F7A;
  --stroke: rgba(28, 48, 92, .12);
  --stroke-2: rgba(28, 48, 92, .18);
  --glass: rgba(90, 147, 255, .08);
  --glass-2: rgba(103, 232, 255, .06);
  --shadow: 0 20px 44px rgba(40, 70, 130, .12);
  --shadow-soft: 0 12px 28px rgba(40, 70, 130, .08);
  --glow-cyan: 0 0 0 1px rgba(10, 111, 138, .16), 0 10px 24px rgba(90, 147, 255, .1);
  --aurora-1: rgba(90, 147, 255, .2);
  --aurora-2: rgba(103, 232, 255, .14);
  --aurora-3: rgba(133, 102, 255, .1);
  --accent: var(--cyan);
  --accent-ink: #0A6F8A;
  --nav-fg: #3F4C6A;
  --nav-hover-bg: rgba(90, 147, 255, .08);
  --nav-hover-fg: #121A33;
  --nav-active-bg: linear-gradient(120deg, rgba(10, 111, 138, .1), rgba(90, 147, 255, .08));
  --nav-active-border: rgba(10, 111, 138, .24);
  --input-bg: #FFFFFF;
  --overlay: rgba(18, 26, 51, .48);
  --scrim: rgba(18, 26, 51, .34);
  --card-bg: rgba(255, 255, 255, .96);
  --card-bg-2: rgba(247, 249, 255, .92);
  --auth-bg: rgba(255, 255, 255, .96);
  --auth-bg-2: rgba(247, 249, 255, .92);
  --sidebar-bg: rgba(255, 255, 255, .82);
  --topbar-bg: rgba(238, 242, 255, .78);
  --bubble-user: linear-gradient(160deg, rgba(90, 147, 255, .2), rgba(10, 111, 138, .08));
  --bubble-agent: rgba(255, 255, 255, .96);
  --bubble-system: rgba(139, 105, 20, .08);
  --ghost-bg: rgba(90, 147, 255, .05);
  --ghost-border: rgba(10, 111, 138, .22);
  --gold: #8B6914;
  --wgreen: #1B7A43;
  --danger: #B42354;
  --ok-bg: rgba(27, 122, 67, .08);
  --ok-border: rgba(27, 122, 67, .28);
  --warn-bg: rgba(139, 105, 20, .08);
  --warn-border: rgba(139, 105, 20, .28);
  --info-bg: rgba(10, 111, 138, .07);
  --info-border: rgba(10, 111, 138, .22);
  --err-bg: rgba(180, 35, 84, .08);
  --err-border: rgba(180, 35, 84, .28);
  --warn-item-bg: rgba(139, 105, 20, .07);
  --warn-item-border: rgba(139, 105, 20, .22);
  --step-done-border: rgba(27, 122, 67, .28);
  --chart-grid: rgba(28, 48, 92, .12);
  --chart-axis: #5A5F7A;
  --chart-series-1: #0A6F8A;
  --chart-series-2: #3D6FE0;
  --chart-series-3: #6B4FE0;
  --theme-color: #EEF2FF;
  --scrollbar: rgba(28, 48, 92, .28);
  --shimmer: linear-gradient(100deg, transparent 20%, rgba(28, 48, 92, .06) 40%, transparent 60%);
  --bg-app: var(--bg);
  --bg-surface: var(--panel);
  --bg-elevated: var(--panel-3);
  --text-primary: var(--text);
  --text-secondary: var(--muted-2);
  --border: var(--stroke);
}