/* public/styles/themes.css */

:root {
  --bg: #0b0d10;
  --text: rgba(232,237,244,.96);
  --muted: rgba(232,237,244,.80);
  --faint: rgba(232,237,244,.58);
  --border: rgba(255,255,255,.12);
  --surface: rgba(255,255,255,.03);
  --surface2: rgba(255,255,255,.05);
  --accent: #ffd24a;
  --accent2: #ffc400;
  --accentText: #0b0d10;
  --brand1: #ffd24a;
  --brand2: #ffc400;
  --link: #ffd24a;
  --pillBg: color-mix(in srgb, #ffd24a 14%, transparent);
  --pillBorder: color-mix(in srgb, #ffd24a 55%, transparent);
  --underline: linear-gradient(90deg, #ffd24a, #ffc400);
  --focusRing: rgba(255,210,74,.28);
}

html[data-theme="dark-yellow"] {
  --bg: #0b0d10;
  --surface: rgba(255,255,255,.03);
  --surface2: rgba(255,255,255,.05);
  --text: rgba(232,237,244,.96);
  --muted: rgba(232,237,244,.80);
  --faint: rgba(232,237,244,.58);
  --border: rgba(255,255,255,.12);
  --accent: #ffd24a;
  --accent2: #ffc400;
  --accentText: #0b0d10;
  --focusRing: rgba(255,210,74,.28);
  --brand1: #ffd24a;
  --brand2: #ffc400;
  --link: #ffd24a;
  --pillBg: color-mix(in srgb, #ffd24a 14%, transparent);
  --pillBorder: color-mix(in srgb, #ffd24a 55%, transparent);
  --underline: linear-gradient(90deg, #ffd24a, #ffc400);
}

html[data-theme="dark-red"] {
  --bg: #0b0d10;
  --surface: rgba(255,255,255,.03);
  --surface2: rgba(255,255,255,.05);
  --text: rgba(232,237,244,.96);
  --muted: rgba(232,237,244,.80);
  --faint: rgba(232,237,244,.58);
  --border: rgba(255,255,255,.12);
  --accent: #e0192d;
  --accent2: #9f0f1c;
  --accentText: #ffffff;
  --focusRing: rgba(224,25,45,.20);
  --brand1: #e0192d;
  --brand2: #9f0f1c;
  --link: #e0192d;
  --pillBg: color-mix(in srgb, #e0192d 14%, transparent);
  --pillBorder: color-mix(in srgb, #e0192d 55%, transparent);
  --underline: linear-gradient(90deg, #e0192d, #9f0f1c);
}

html[data-theme="light-black"] {
  --bg: #ffffff;
  --surface: rgba(0,0,0,.04);
  --surface2: rgba(0,0,0,.06);
  --text: rgba(12,14,18,.96);
  --muted: rgba(12,14,18,.72);
  --faint: rgba(12,14,18,.55);
  --border: rgba(0,0,0,.14);
  --accent: #111111;
  --accent2: #444444;
  --accentText: #ffffff;
  --focusRing: rgba(0,0,0,.18);
  --brand1: #111111;
  --brand2: #444444;
  --link: #111111;
  --pillBg: color-mix(in srgb, #111111 10%, transparent);
  --pillBorder: color-mix(in srgb, #111111 40%, transparent);
  --underline: linear-gradient(90deg, #111111, #444444);
}

html[data-theme="light-blue"] {
  --bg: #ffffff;
  --surface: rgba(0,0,0,.04);
  --surface2: rgba(0,0,0,.06);
  --text: rgba(12,14,18,.96);
  --muted: rgba(12,14,18,.72);
  --faint: rgba(12,14,18,.55);
  --border: rgba(0,0,0,.14);
  --accent: #1e63ff;
  --accent2: #1447b8;
  --accentText: #ffffff;
  --focusRing: rgba(30,99,255,.22);
  --brand1: #1e63ff;
  --brand2: #1447b8;
  --link: #1e63ff;
  --pillBg: color-mix(in srgb, #1e63ff 12%, transparent);
  --pillBorder: color-mix(in srgb, #1e63ff 45%, transparent);
  --underline: linear-gradient(90deg, #1e63ff, #1447b8);
}

html[data-theme="light-red"] {
  --bg: #ffffff;
  --surface: rgba(0,0,0,.04);
  --surface2: rgba(0,0,0,.06);
  --text: rgba(12,14,18,.96);
  --muted: rgba(12,14,18,.72);
  --faint: rgba(12,14,18,.55);
  --border: rgba(0,0,0,.14);
  --accent: #e0192d;
  --accent2: #9f0f1c;
  --accentText: #ffffff;
  --focusRing: rgba(224,25,45,.20);
  --brand1: #e0192d;
  --brand2: #9f0f1c;
  --link: #e0192d;
  --pillBg: color-mix(in srgb, #e0192d 12%, transparent);
  --pillBorder: color-mix(in srgb, #e0192d 45%, transparent);
  --underline: linear-gradient(90deg, #e0192d, #9f0f1c);
}

html[data-theme="valentine"] {
  --bg: #0b0d10;
  --surface: rgba(255,255,255,.035);
  --surface2: rgba(255,255,255,.06);
  --text: rgba(232,237,244,.96);
  --muted: rgba(232,237,244,.80);
  --faint: rgba(232,237,244,.58);
  --border: rgba(255,255,255,.12);
  --accent: #ff4d88;
  --accent2: #e0192d;
  --accentText: #ffffff;
  --focusRing: rgba(255,77,136,.26);
  --brand1: #ff4d88;
  --brand2: #e0192d;
  --link: #ff4d88;
  --pillBg: color-mix(in srgb, #ff4d88 14%, transparent);
  --pillBorder: color-mix(in srgb, #ff4d88 50%, transparent);
  --underline: linear-gradient(90deg, #ff4d88, #e0192d);
}

html[data-theme="patriotic"] {
  --bg: #0b0d10;
  --surface: rgba(255,255,255,.03);
  --surface2: rgba(255,255,255,.05);
  --text: rgba(232,237,244,.96);
  --muted: rgba(232,237,244,.80);
  --faint: rgba(232,237,244,.58);
  --border: rgba(255,255,255,.12);
  --accent: #1e63ff;
  --accent2: #e0192d;
  --accentText: #ffffff;
  --focusRing: rgba(30,99,255,.22);
  --brand1: #1e63ff;
  --brand2: #e0192d;
  --link: #1e63ff;
  --pillBg: color-mix(in srgb, #1e63ff 14%, transparent);
  --pillBorder: color-mix(in srgb, #1e63ff 50%, transparent);
  --underline: linear-gradient(90deg, #1e63ff, #e0192d);
}

html[data-theme="halloween"] {
  --bg: #0b0d10;
  --surface: rgba(255,255,255,.03);
  --surface2: rgba(255,255,255,.05);
  --text: rgba(232,237,244,.96);
  --muted: rgba(232,237,244,.80);
  --faint: rgba(232,237,244,.58);
  --border: rgba(255,255,255,.12);
  --accent: #ff8a00;
  --accent2: #ff4d00;
  --accentText: #0b0d10;
  --focusRing: rgba(255,138,0,.24);
  --brand1: #ff8a00;
  --brand2: #ff4d00;
  --link: #ff8a00;
  --pillBg: color-mix(in srgb, #ff8a00 14%, transparent);
  --pillBorder: color-mix(in srgb, #ff8a00 50%, transparent);
  --underline: linear-gradient(90deg, #ff8a00, #ff4d00);
}

html[data-theme="thanksgiving"] {
  --bg: #0b0d10;
  --surface: rgba(255,255,255,.03);
  --surface2: rgba(255,255,255,.05);
  --text: rgba(232,237,244,.96);
  --muted: rgba(232,237,244,.80);
  --faint: rgba(232,237,244,.58);
  --border: rgba(255,255,255,.12);
  --accent: #d98c2b;
  --accent2: #8a4b1c;
  --accentText: #0b0d10;
  --focusRing: rgba(217,140,43,.22);
  --brand1: #d98c2b;
  --brand2: #8a4b1c;
  --link: #d98c2b;
  --pillBg: color-mix(in srgb, #d98c2b 14%, transparent);
  --pillBorder: color-mix(in srgb, #d98c2b 50%, transparent);
  --underline: linear-gradient(90deg, #d98c2b, #8a4b1c);
}

html[data-theme="christmas"] {
  --bg: #0b0d10;
  --surface: rgba(255,255,255,.03);
  --surface2: rgba(255,255,255,.05);
  --text: rgba(232,237,244,.96);
  --muted: rgba(232,237,244,.80);
  --faint: rgba(232,237,244,.58);
  --border: rgba(255,255,255,.12);
  --accent: #20c05c;
  --accent2: #e0192d;
  --accentText: #0b0d10;
  --focusRing: rgba(32,192,92,.22);
  --brand1: #20c05c;
  --brand2: #e0192d;
  --link: #20c05c;
  --pillBg: color-mix(in srgb, #20c05c 14%, transparent);
  --pillBorder: color-mix(in srgb, #20c05c 50%, transparent);
  --underline: linear-gradient(90deg, #20c05c, #e0192d);
}