:root,
html[data-palette="blue"] {
  --navy: #00A3E4;
  --navy-dark: #0087BD;
  --navy-light: #4DBFEF;
  --navy-pale: #E1F4FC;

  --bg: #F3F6F9;
  --bg-card: #FFFFFF;
  --surface: #F8FAFC;
  --white: #FFFFFF;
  --text: #16212B;
  --text-2: #4E5C69;
  --text-3: #8A97A3;
  --border: #E1E8EE;
  --border-dark: #CFD9E1;

  --amber-bg: #FBF2E2;
  --amber: #A66A1E;
  --green-bg: #E7F5EC;
  --green: #2E7D46;
  --red-bg: #FBEAEA;
  --crimson: #C13B2B;

  --shadow-sm: 0 1px 3px rgba(22,33,43,.07), 0 1px 2px rgba(22,33,43,.05);
  --shadow: 0 4px 18px rgba(22,33,43,.09), 0 1px 4px rgba(22,33,43,.05);
  --shadow-lg: 0 16px 44px rgba(22,33,43,.14), 0 4px 14px rgba(22,33,43,.07);

  --sidebar-bg: #EBF2F7;
  --sidebar-border: #DAE4EC;
  --sidebar-hover: #E1EAF1;
  --resources-bg: #F6F9FB;

  --chat-bg: #FFFFFF;
  --bubble-user-bg: var(--navy);
  --bubble-user-text: #FFFFFF;
  --composer-bg: #FFFFFF;
  --composer-border: #DAE4EC;
}

html.dark-mode,
html[data-palette="blue"].dark-mode {
  --navy: #29B6F0;
  --navy-dark: #1C9AD1;
  --navy-light: #7ED1F5;
  --navy-pale: #0F2A38;

  --bg: #141A21;
  --bg-card: #1C242D;
  --surface: #232C36;
  --white: #1C242D;
  --text: #EAF1F6;
  --text-2: #B7C2CB;
  --text-3: #7C8790;
  --border: #2C3640;
  --border-dark: #3B4652;

  --amber-bg: #33280F;
  --amber: #E0AC5C;
  --green-bg: #10291B;
  --green: #5FBE81;
  --red-bg: #331714;
  --crimson: #E38071;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.22);
  --shadow: 0 4px 18px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.24);
  --shadow-lg: 0 16px 44px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.3);

  --sidebar-bg: #10161C;
  --sidebar-border: #232C36;
  --sidebar-hover: #1A222A;
  --resources-bg: #12181F;

  --chat-bg: #141A21;
  --composer-bg: #1C242D;
  --composer-border: #3B4652;
}

html[data-palette="terracotta"] {
  --navy: #C45B3A;
  --navy-dark: #A3492D;
  --navy-light: #D98865;
  --navy-pale: #F7E4D9;

  --bg: #FAF6EE;
  --bg-card: #FFFDF9;
  --surface: #F3ECE0;
  --white: #FFFFFF;
  --text: #2B211B;
  --text-2: #6B5D50;
  --text-3: #A89A8C;
  --border: #E7DDCE;
  --border-dark: #D8CAB7;

  --amber-bg: #FBF2E2;
  --amber: #A66A1E;
  --green-bg: #E7F5EC;
  --green: #2E7D46;
  --red-bg: #FBEAEA;
  --crimson: #C13B2B;

  --shadow-sm: 0 1px 3px rgba(43,33,27,.08), 0 1px 2px rgba(43,33,27,.05);
  --shadow: 0 4px 18px rgba(43,33,27,.10), 0 1px 4px rgba(43,33,27,.06);
  --shadow-lg: 0 16px 44px rgba(43,33,27,.15), 0 4px 14px rgba(43,33,27,.08);

  --sidebar-bg: #F3EAD9;
  --sidebar-border: #E3D6C1;
  --sidebar-hover: #ECE0CB;
  --resources-bg: #F8F1E4;

  --chat-bg: #FFFDF9;
  --bubble-user-bg: var(--navy);
  --bubble-user-text: #FFFFFF;
  --composer-bg: #FFFDF9;
  --composer-border: #E3D6C1;
}

html[data-palette="terracotta"].dark-mode {
  --navy: #E2825E;
  --navy-dark: #C97A4E;
  --navy-light: #F2AB89;
  --navy-pale: #3A2418;

  --bg: #211A15;
  --bg-card: #2B221C;
  --surface: #332822;
  --white: #2B221C;
  --text: #F5ECE2;
  --text-2: #CBBAA9;
  --text-3: #938172;
  --border: #3D3128;
  --border-dark: #4C3D31;

  --amber-bg: #33280F;
  --amber: #E0AC5C;
  --green-bg: #10291B;
  --green: #5FBE81;
  --red-bg: #331714;
  --crimson: #E38071;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.22);
  --shadow: 0 4px 18px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.24);
  --shadow-lg: 0 16px 44px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.3);

  --sidebar-bg: #170F0B;
  --sidebar-border: #2B221C;
  --sidebar-hover: #211A15;
  --resources-bg: #1A1310;

  --chat-bg: #211A15;
  --composer-bg: #2B221C;
  --composer-border: #4C3D31;
}

html[data-palette="navy"] {
  --navy: #1F3B5C;
  --navy-dark: #152A42;
  --navy-light: #3E6289;
  --navy-pale: #E4EAF1;

  --bg: #F4F6F8;
  --bg-card: #FFFFFF;
  --surface: #F8F9FB;
  --white: #FFFFFF;
  --text: #1A2530;
  --text-2: #4C5964;
  --text-3: #87929C;
  --border: #E2E7EC;
  --border-dark: #CDD5DD;

  --amber-bg: #FBF2E2;
  --amber: #A66A1E;
  --green-bg: #E7F5EC;
  --green: #2E7D46;
  --red-bg: #FBEAEA;
  --crimson: #C13B2B;

  --shadow-sm: 0 1px 3px rgba(22,33,43,.07), 0 1px 2px rgba(22,33,43,.05);
  --shadow: 0 4px 18px rgba(22,33,43,.09), 0 1px 4px rgba(22,33,43,.05);
  --shadow-lg: 0 16px 44px rgba(22,33,43,.14), 0 4px 14px rgba(22,33,43,.07);

  --sidebar-bg: #EDF0F4;
  --sidebar-border: #DCE2E8;
  --sidebar-hover: #E3E8ED;
  --resources-bg: #F6F8FA;

  --chat-bg: #FFFFFF;
  --bubble-user-bg: var(--navy);
  --bubble-user-text: #FFFFFF;
  --composer-bg: #FFFFFF;
  --composer-border: #DCE2E8;
}

html[data-palette="navy"].dark-mode {
  --navy: #5C87B3;
  --navy-dark: #4A709A;
  --navy-light: #8AACCB;
  --navy-pale: #182636;

  --bg: #131820;
  --bg-card: #1B222C;
  --surface: #212A35;
  --white: #1B222C;
  --text: #E7ECF1;
  --text-2: #AEB9C4;
  --text-3: #76828D;
  --border: #2A3441;
  --border-dark: #384553;

  --amber-bg: #33280F;
  --amber: #E0AC5C;
  --green-bg: #10291B;
  --green: #5FBE81;
  --red-bg: #331714;
  --crimson: #E38071;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.22);
  --shadow: 0 4px 18px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.24);
  --shadow-lg: 0 16px 44px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.3);

  --sidebar-bg: #0E131A;
  --sidebar-border: #212A35;
  --sidebar-hover: #171F28;
  --resources-bg: #10151C;

  --chat-bg: #131820;
  --composer-bg: #1B222C;
  --composer-border: #384553;
}

html[data-palette="emerald"] {
  --navy: #1B8F5D;
  --navy-dark: #146B46;
  --navy-light: #4EB688;
  --navy-pale: #DFF3E8;

  --bg: #F3F8F5;
  --bg-card: #FFFFFF;
  --surface: #F6FAF8;
  --white: #FFFFFF;
  --text: #152420;
  --text-2: #485A53;
  --text-3: #84958D;
  --border: #E0EBE5;
  --border-dark: #CBDCD2;

  --amber-bg: #FBF2E2;
  --amber: #A66A1E;
  --green-bg: #E7F5EC;
  --green: #2E7D46;
  --red-bg: #FBEAEA;
  --crimson: #C13B2B;

  --shadow-sm: 0 1px 3px rgba(21,36,32,.07), 0 1px 2px rgba(21,36,32,.05);
  --shadow: 0 4px 18px rgba(21,36,32,.09), 0 1px 4px rgba(21,36,32,.05);
  --shadow-lg: 0 16px 44px rgba(21,36,32,.14), 0 4px 14px rgba(21,36,32,.07);

  --sidebar-bg: #EBF4EF;
  --sidebar-border: #DBE9E1;
  --sidebar-hover: #E1EEE7;
  --resources-bg: #F5FAF7;

  --chat-bg: #FFFFFF;
  --bubble-user-bg: var(--navy);
  --bubble-user-text: #FFFFFF;
  --composer-bg: #FFFFFF;
  --composer-border: #DBE9E1;
}

html[data-palette="emerald"].dark-mode {
  --navy: #48C68F;
  --navy-dark: #38A876;
  --navy-light: #7FDBB2;
  --navy-pale: #0F2C21;

  --bg: #101915;
  --bg-card: #18221D;
  --surface: #1E2A24;
  --white: #18221D;
  --text: #E6F1EC;
  --text-2: #AEC2BA;
  --text-3: #77897F;
  --border: #28362F;
  --border-dark: #36473D;

  --amber-bg: #33280F;
  --amber: #E0AC5C;
  --green-bg: #10291B;
  --green: #5FBE81;
  --red-bg: #331714;
  --crimson: #E38071;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.22);
  --shadow: 0 4px 18px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.24);
  --shadow-lg: 0 16px 44px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.3);

  --sidebar-bg: #0B1310;
  --sidebar-border: #1E2A24;
  --sidebar-hover: #141E19;
  --resources-bg: #0D1512;

  --chat-bg: #101915;
  --composer-bg: #18221D;
  --composer-border: #36473D;
}

html.dark-mode body { background: var(--bg); }

html[data-palette="blue"] .login-left,
:root .login-left { background: linear-gradient(160deg, #0B3A52 0%, #071C29 100%); }
html[data-palette="blue"] #login-screen,
:root #login-screen {
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 110%, rgba(0,163,228,.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% -20%, rgba(0,163,228,.08) 0%, transparent 60%);
}

html[data-palette="terracotta"] .login-left { background: linear-gradient(160deg, #5C2A16 0%, #2B140A 100%); }
html[data-palette="terracotta"] #login-screen {
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 110%, rgba(196,91,58,.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% -20%, rgba(196,91,58,.10) 0%, transparent 60%);
}

html[data-palette="navy"] .login-left { background: linear-gradient(160deg, #16293F 0%, #0A141F 100%); }
html[data-palette="navy"] #login-screen {
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 110%, rgba(31,59,92,.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% -20%, rgba(31,59,92,.10) 0%, transparent 60%);
}

html[data-palette="emerald"] .login-left { background: linear-gradient(160deg, #103825 0%, #071710 100%); }
html[data-palette="emerald"] #login-screen {
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 110%, rgba(27,143,93,.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% -20%, rgba(27,143,93,.10) 0%, transparent 60%);
}

.login-logo, .pending-logo { border-radius: 50%; object-fit: cover; }