/*
 * Themes. Each [data-theme] (on <body>, see Theme) sets the semantic colors behind Tailwind's
 * page / surface / ink / line / accent / success / danger / link classes, as "r g b" triples,
 * and styles the gathering page's materials through the theme-* classes:
 *
 *   theme-site-header  the site header band      theme-player        the YouTube player
 *   theme-wordmark     "Music Club"              theme-control-bar   the bar under the cameras
 *   theme-lobby        the "Join gathering" box  theme-chat          the chat sidebar
 *   theme-card         attendee cards
 *
 * A material can redefine the color variables for what's inside it (the brass control bar has
 * dark ink), so the buttons and controls in it keep using the same classes.
 */

body {
  background-color: rgb(var(--c-page));
  color: rgb(var(--c-ink));
}

/*
 * Shared geometry: the site header and wordmark are the same size in every theme, so switching
 * themes changes colors, textures and fonts but nothing moves. Themes style these boxes; they don't
 * resize them (no padding, margins, border widths or line heights of their own).
 */
.theme-site-header {
  margin-top: 0;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 3px solid transparent;
  border-radius: 0 0 12px 12px;
}

.theme-wordmark {
  height: 2.75rem;
  margin: 0;
  font-size: var(--wordmark-size, 1.875rem);
  line-height: 2.75rem;
  white-space: nowrap;
}

/* On phones the wordmark shares its row with the account controls, so every theme's is a bit smaller. */
@media (max-width: 639px) {
  .theme-wordmark {
    font-size: calc(var(--wordmark-size, 1.875rem) * 0.8);
  }
}

dialog {
  background-color: rgb(var(--c-page));
  color: rgb(var(--c-ink));
}

/* Tailwind Typography (the sign-in dialogs and <dl>s @apply prose) follows the theme too. */
.prose,
dialog,
dl {
  --tw-prose-body: rgb(var(--c-ink-muted));
  --tw-prose-headings: rgb(var(--c-ink));
  --tw-prose-lead: rgb(var(--c-ink-muted));
  --tw-prose-links: rgb(var(--c-link));
  --tw-prose-bold: rgb(var(--c-ink));
  --tw-prose-counters: rgb(var(--c-ink-subtle));
  --tw-prose-bullets: rgb(var(--c-line));
  --tw-prose-hr: rgb(var(--c-line));
  --tw-prose-quotes: rgb(var(--c-ink));
  --tw-prose-captions: rgb(var(--c-ink-subtle));
  --tw-prose-code: rgb(var(--c-ink));
}

input:not([type="range"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"]),
select,
textarea {
  background-color: rgb(var(--c-surface));
  color: rgb(var(--c-ink));
  border-color: rgb(var(--c-line));
}

/* Placeholders follow the field's own ink (not ink-subtle, which materials like grilles lighten). */
input::placeholder,
textarea::placeholder {
  color: rgb(var(--c-ink) / 0.7);
}

/* ---------- Tolex (the default): black tolex, gold grille cloth, brushed brass ---------- */

:root,
[data-theme="tolex"] {
  --c-jewel: 224 137 43;
  --c-page: 16 15 14;
  --c-surface: 27 25 22;
  --c-surface-muted: 38 35 31;
  --c-ink: 237 227 204;
  --c-ink-muted: 214 205 184;
  --c-ink-subtle: 167 159 142;
  --c-line: 66 60 52;
  --c-accent: 200 162 75;
  --c-accent-strong: 222 190 110;
  --c-accent-ink: 26 23 18;
  --c-success: 224 137 43;
  --c-success-strong: 240 160 70;
  --c-success-ink: 26 23 18;
  --c-danger: 178 58 42;
  --c-danger-strong: 150 45 32;
  --c-danger-ink: 255 246 232;
  --c-link: 217 185 105;
  --c-link-hover: 237 227 204;

  --brass: linear-gradient(180deg, #e6cb80 0%, #c8a24b 48%, #a07a33 100%);
  --grille: repeating-linear-gradient(0deg, rgb(200 162 75 / 0.1) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(200 162 75 / 0.07) 0 1px, transparent 1px 3px);
}

[data-theme="tolex"] {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2'/><feDiffuseLighting lighting-color='%23ffffff' surfaceScale='2'><feDistantLight azimuth='235' elevation='50'/></feDiffuseLighting></filter><rect width='240' height='240' filter='url(%23g)' opacity='0.06'/></svg>");
}

[data-theme="tolex"] :is(h1, h2, h3) {
  font-family: Anton, Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
}

[data-theme="tolex"] .theme-site-header {
  border-bottom-color: rgb(237 227 204 / 0.35);
  border-radius: 0;
}

[data-theme="tolex"] .theme-wordmark {
  color: #c8a24b;
  text-shadow: 0 2px 0 #5e481c;
}

[data-theme="tolex"] .theme-lobby {
  background-color: #1b1916;
  background-image: var(--grille);
  box-shadow: inset 0 0 0 2px rgb(237 227 204 / 0.45);
  color: rgb(var(--c-ink));
}

[data-theme="tolex"] .theme-player {
  border: 2px solid rgb(237 227 204 / 0.55);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
}

[data-theme="tolex"] .theme-control-bar {
  --c-ink: 26 23 18;
  --c-ink-muted: 26 23 18;
  --c-ink-subtle: 60 48 25;
  --c-surface: 237 227 204;
  --c-surface-muted: 246 238 220;
  --c-line: 120 95 40;
  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 2px), var(--brass);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), inset 0 -2px 0 rgb(0 0 0 / 0.25), 0 8px 18px rgb(0 0 0 / 0.5);
  color: rgb(var(--c-ink));
  accent-color: #1a1712;
}

[data-theme="tolex"] .theme-chat {
  background-color: #1b1916;
  background-image: var(--grille);
  box-shadow: inset 0 0 0 2px rgb(237 227 204 / 0.35);
}

[data-theme="tolex"] .theme-card {
  background-color: #161514;
  box-shadow: inset 0 0 0 1px rgb(237 227 204 / 0.25);
}

/* ---------- Overdrive: expanded-metal grille, white faceplate, blue jewel ---------- */

[data-theme="overdrive"] {
  --c-jewel: 47 111 224;
  --c-page: 11 11 12;
  --c-surface: 20 21 22;
  --c-surface-muted: 30 32 34;
  --c-ink: 228 231 234;
  --c-ink-muted: 195 200 205;
  --c-ink-subtle: 142 149 156;
  --c-line: 52 55 59;
  --c-accent: 242 241 238;
  --c-accent-strong: 255 255 255;
  --c-accent-ink: 17 18 20;
  --c-success: 47 111 224;
  --c-success-strong: 30 91 208;
  --c-success-ink: 255 255 255;
  --c-danger: 196 32 41;
  --c-danger-strong: 170 25 33;
  --c-danger-ink: 255 255 255;
  --c-link: 140 180 250;
  --c-link-hover: 207 224 255;

  --mesh: repeating-linear-gradient(60deg, #0b0b0c 0 4px, transparent 4px 16px),
    repeating-linear-gradient(-60deg, #0b0b0c 0 4px, transparent 4px 16px),
    radial-gradient(ellipse at 50% 80%, #5a5e63 0%, #1e2022 75%);

  font-family: Jost, ui-sans-serif, system-ui, sans-serif;
}

[data-theme="overdrive"] :is(h2, h3) {
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

[data-theme="overdrive"] .theme-site-header {
  background-color: #3a3c3f;
  background-image: var(--mesh);
  --c-ink-muted: 228 231 234;
}

[data-theme="overdrive"] .theme-wordmark {
  display: inline-block;
  padding: 0 0.6em;
  border-radius: 10px;
  background: #0b0b0c;
  box-shadow: 0 0 0 2px #2a2c2f;
  font-family: Comfortaa, ui-rounded, sans-serif;
  font-weight: 700;
  text-transform: lowercase;
  color: #ffffff;
}

[data-theme="overdrive"] .theme-lobby {
  --c-ink-subtle: 228 231 234;
  background-color: #3a3c3f;
  background-image: var(--mesh);
  color: #ffffff;
}

[data-theme="overdrive"] .theme-player {
  border: 10px solid #141516;
  outline: 1px solid #26282b;
  outline-offset: -1px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
}

[data-theme="overdrive"] .theme-control-bar {
  --c-ink: 17 18 20;
  --c-ink-muted: 17 18 20;
  --c-ink-subtle: 70 74 78;
  --c-surface: 255 255 255;
  --c-surface-muted: 233 232 228;
  --c-line: 185 190 195;
  background: #f2f1ee;
  color: rgb(var(--c-ink));
  accent-color: #111214;
}

[data-theme="overdrive"] .theme-chat {
  background-color: rgb(var(--c-surface));
  box-shadow: inset 0 0 0 1px #26282b;
}

[data-theme="overdrive"] .theme-card {
  --c-ink: 17 18 20;
  --c-ink-muted: 17 18 20;
  background: #f2f1ee;
  color: rgb(var(--c-ink));
  box-shadow: none;
}

/* ---------- Silverface: brushed aluminium, blue lettering, silver-blue sparkle grille ---------- */

[data-theme="silverface"] {
  --c-jewel: 200 32 42;
  --c-page: 18 18 18;
  --c-surface: 28 28 28;
  --c-surface-muted: 38 38 38;
  --c-ink: 236 237 238;
  --c-ink-muted: 201 205 209;
  --c-ink-subtle: 163 170 176;
  --c-line: 58 61 64;
  --c-accent: 205 210 214;
  --c-accent-strong: 225 229 232;
  --c-accent-ink: 30 77 123;
  --c-success: 30 77 123;
  --c-success-strong: 24 62 100;
  --c-success-ink: 255 255 255;
  --c-danger: 200 32 42;
  --c-danger-strong: 168 24 33;
  --c-danger-ink: 255 255 255;
  --c-link: 143 184 224;
  --c-link-hover: 199 220 240;

  --aluminium: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 1px, transparent 1px 2px),
    linear-gradient(180deg, #dde1e4 0%, #c3c8cc 50%, #aeb4b9 100%);
  --sparkle: repeating-linear-gradient(45deg, rgb(150 190 225 / 0.05) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.07) 0 1px, transparent 1px 2px),
    linear-gradient(180deg, #8a97a1, #6e7b85);

  font-family: "Work Sans", ui-sans-serif, system-ui, sans-serif;
}

[data-theme="silverface"] :is(h2, h3) {
  font-family: "Josefin Sans", ui-sans-serif, sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

[data-theme="silverface"] .theme-site-header {
  border-bottom-color: #d5d9dc;
  border-radius: 0;
  box-shadow: 0 1px 0 #6a7279;
}

[data-theme="silverface"] .theme-wordmark {
  font-family: Yellowtail, cursive;
  font-weight: 400;
  --wordmark-size: 2.5rem;
  color: #f4f6f8;
}

[data-theme="silverface"] .theme-lobby {
  --c-ink-subtle: 244 246 248;
  background-color: #7d8a94;
  background-image: var(--sparkle);
  box-shadow: inset 0 0 0 3px #d5d9dc, inset 0 0 0 4px #6a7279;
  color: #ffffff;
}

[data-theme="silverface"] .theme-player {
  border: 3px solid #d5d9dc;
  outline: 1px solid #6a7279;
  outline-offset: -1px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
}

[data-theme="silverface"] .theme-control-bar {
  --c-ink: 30 77 123;
  --c-ink-muted: 30 77 123;
  --c-ink-subtle: 62 74 85;
  --c-surface: 242 244 245;
  --c-surface-muted: 227 230 233;
  --c-line: 140 148 154;
  background-image: var(--aluminium);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 8px 18px rgb(0 0 0 / 0.5);
  color: rgb(var(--c-ink));
  accent-color: #1e4d7b;
}

[data-theme="silverface"] .theme-chat,
[data-theme="silverface"] .theme-card {
  --c-ink: 20 32 43;
  --c-ink-muted: 62 74 85;
  --c-ink-subtle: 74 86 98;
  --c-surface: 247 248 249;
  --c-surface-muted: 236 238 240;
  --c-line: 140 148 154;
  --c-link: 30 77 123;
  --c-link-hover: 20 32 43;
  background-image: linear-gradient(180deg, #e9ecee, #d7dbde);
  color: rgb(var(--c-ink));
}

[data-theme="silverface"] .theme-chat {
  box-shadow: inset 0 0 0 3px #d5d9dc, inset 0 0 0 4px #6a7279;
}

[data-theme="silverface"] .theme-card {
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
}

/* ---------- Tweed: lacquered tweed, hardwood, cane grille, black faceplate ---------- */

[data-theme="tweed"] {
  --c-jewel: 232 138 44;
  --c-page: 199 154 92;
  --c-surface: 251 241 222;
  --c-surface-muted: 241 226 196;
  --c-ink: 42 26 12;
  --c-ink-muted: 58 36 16;
  --c-ink-subtle: 74 46 20;
  --c-line: 138 98 52;
  --c-accent: 20 18 16;
  --c-accent-strong: 42 38 34;
  --c-accent-ink: 244 238 226;
  --c-success: 232 138 44;
  --c-success-strong: 210 118 30;
  --c-success-ink: 42 26 12;
  --c-danger: 179 38 30;
  --c-danger-strong: 150 30 24;
  --c-danger-ink: 255 255 255;
  --c-link: 90 44 14;
  --c-link-hover: 42 26 12;

  --hardwood: linear-gradient(180deg, #6b3a1c, #4a2510);
  --cane: repeating-linear-gradient(0deg, rgb(222 186 120 / 0.12) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(60deg, rgb(222 186 120 / 0.12) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(120deg, rgb(222 186 120 / 0.12) 0 2px, transparent 2px 7px);

  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background-image: linear-gradient(160deg, rgb(255 214 140 / 0.3), rgb(120 66 20 / 0.3)),
    repeating-linear-gradient(45deg, rgb(92 56 22 / 0.05) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(-45deg, rgb(255 236 196 / 0.04) 0 1px, transparent 1px 2px);
  background-attachment: fixed;
}

[data-theme="tweed"] :is(h1, h2, h3) {
  font-family: Fraunces, Georgia, serif;
  font-style: italic;
  font-weight: 900;
}

[data-theme="tweed"] .theme-site-header {
  --c-ink-muted: 242 217 166;
  --c-link: 242 217 166;
  --c-link-hover: 255 244 220;
  background-image: var(--hardwood);
  box-shadow: 0 6px 16px rgb(60 30 8 / 0.45), inset 0 -1px 0 rgb(255 210 160 / 0.25);
}

[data-theme="tweed"] .theme-wordmark {
  color: #f2d9a6;
  text-shadow: 0 2px 0 #2e1608;
}

[data-theme="tweed"] .theme-lobby {
  --c-ink-subtle: 242 217 166;
  background-color: #3b2412;
  background-image: var(--cane);
  box-shadow: inset 0 0 0 8px #5a2f16, inset 0 0 0 9px rgb(255 210 160 / 0.3);
  color: #fbf1de;
}

[data-theme="tweed"] .theme-player {
  border: 10px solid #5a2f16;
  outline: 1px solid rgb(255 210 160 / 0.3);
  outline-offset: -1px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
}

[data-theme="tweed"] .theme-control-bar {
  --c-ink: 244 238 226;
  --c-ink-muted: 244 238 226;
  --c-ink-subtle: 184 174 156;
  --c-surface: 42 38 34;
  --c-surface-muted: 58 53 48;
  --c-line: 74 68 60;
  background: #141210;
  color: rgb(var(--c-ink));
  accent-color: #deba78;
}

[data-theme="tweed"] .theme-chat {
  --c-ink: 251 241 222;
  --c-ink-muted: 240 221 184;
  --c-ink-subtle: 201 174 132;
  --c-surface: 36 22 10;
  --c-line: 107 74 40;
  --c-link: 242 217 166;
  --c-link-hover: 255 244 220;
  background-color: #3b2412;
  background-image: var(--cane);
  box-shadow: inset 0 0 0 8px #5a2f16, inset 0 0 0 9px rgb(255 210 160 / 0.3);
  color: rgb(var(--c-ink));
}

[data-theme="tweed"] .theme-card {
  --c-ink: 244 238 226;
  --c-ink-muted: 244 238 226;
  --c-accent: 222 186 120;
  --c-accent-ink: 20 18 16;
  background: #141210;
  box-shadow: inset 0 0 0 3px #6b3a1c, 0 4px 12px rgb(60 30 8 / 0.25);
  color: rgb(var(--c-ink));
}

/* ---------- Orange: orange tolex, oatmeal grille in a cream frame, pictogram faceplate ---------- */

[data-theme="orange"] {
  --c-jewel: 242 179 61;
  --c-page: 229 113 30;
  --c-surface: 246 240 226;
  --c-surface-muted: 239 228 204;
  --c-ink: 30 18 9;
  --c-ink-muted: 46 28 14;
  --c-ink-subtle: 58 36 16;
  --c-line: 160 110 60;
  --c-accent: 30 18 9;
  --c-accent-strong: 58 36 16;
  --c-accent-ink: 246 240 226;
  --c-success: 242 179 61;
  --c-success-strong: 224 156 34;
  --c-success-ink: 30 18 9;
  --c-danger: 158 27 27;
  --c-danger-strong: 130 20 20;
  --c-danger-ink: 255 255 255;
  --c-link: 42 14 0;
  --c-link-hover: 30 18 9;

  --frame: #efe4cc;
  --oatmeal: repeating-linear-gradient(0deg, rgb(120 90 50 / 0.07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(255 250 235 / 0.1) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #ddcdac, #d4c3a0);

  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background-image: linear-gradient(170deg, rgb(255 190 120 / 0.18), rgb(120 40 0 / 0.12)),
    repeating-linear-gradient(45deg, rgb(80 30 0 / 0.04) 0 1px, transparent 1px 2px);
  background-attachment: fixed;
}

[data-theme="orange"] :is(h1, h2, h3) {
  font-family: Shrikhand, Georgia, serif;
  font-weight: 400;
}

[data-theme="orange"] .theme-site-header {
  background-image: var(--oatmeal);
  box-shadow: inset 0 0 0 4px var(--frame), 0 6px 14px rgb(80 30 0 / 0.3);
}

[data-theme="orange"] .theme-wordmark {
  color: #1e1209;
}

[data-theme="orange"] .theme-lobby {
  --c-ink-subtle: 46 28 14;
  background-image: var(--oatmeal);
  box-shadow: inset 0 0 0 8px var(--frame);
  color: #1e1209;
}

[data-theme="orange"] .theme-player {
  border: 10px solid var(--frame);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
}

[data-theme="orange"] .theme-control-bar {
  --c-surface: 255 255 255;
  --c-surface-muted: 239 228 204;
  background: #f6f0e2;
  box-shadow: inset 0 0 0 3px var(--frame), 0 4px 12px rgb(80 30 0 / 0.2);
  color: rgb(var(--c-ink));
  accent-color: #1e1209;
}

[data-theme="orange"] .theme-chat {
  --c-surface: 251 247 238;
  background-image: var(--oatmeal);
  box-shadow: inset 0 0 0 8px var(--frame);
}

[data-theme="orange"] .theme-card {
  background: #f6f0e2;
  box-shadow: inset 0 0 0 3px var(--frame), 0 4px 12px rgb(80 30 0 / 0.2);
}

/* ---------- Watt: black vinyl, charcoal weave, glossy black Perspex with white engraving ---------- */

[data-theme="watt"] {
  --c-jewel: 200 32 42;
  --c-page: 14 14 15;
  --c-surface: 24 25 26;
  --c-surface-muted: 34 35 37;
  --c-ink: 245 245 242;
  --c-ink-muted: 208 210 212;
  --c-ink-subtle: 163 167 171;
  --c-line: 58 59 62;
  --c-accent: 242 242 238;
  --c-accent-strong: 255 255 255;
  --c-accent-ink: 14 14 15;
  --c-success: 185 190 195;
  --c-success-strong: 210 214 218;
  --c-success-ink: 14 14 15;
  --c-danger: 179 38 30;
  --c-danger-strong: 150 30 24;
  --c-danger-ink: 255 255 255;
  --c-link: 201 211 221;
  --c-link-hover: 255 255 255;

  --weave: repeating-linear-gradient(0deg, rgb(255 255 255 / 0.03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.25) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #2c2d2f, #262729);
  --perspex: linear-gradient(180deg, #2a2b2e 0%, #0c0c0d 42%, #050506 100%);

  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
}

[data-theme="watt"] :is(h1, h2, h3) {
  font-family: Michroma, ui-sans-serif, sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
}

[data-theme="watt"] .theme-site-header {
  --c-ink-muted: 245 245 242;
  background-image: var(--weave);
}

[data-theme="watt"] .theme-wordmark {
  display: inline-block;
  padding: 0 0.7em;
  border-radius: 3px;
  background: #f2f2ee;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.6) inset, 0 2px 6px rgb(0 0 0 / 0.6);
  color: #0e0e0f;
  font-family: Michroma, ui-sans-serif, sans-serif;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

[data-theme="watt"] .theme-wordmark a {
  color: #0e0e0f;
}

[data-theme="watt"] .theme-lobby {
  --c-ink-subtle: 208 210 212;
  background-image: var(--weave);
  color: #f5f5f2;
}

[data-theme="watt"] .theme-player {
  border: 10px solid #050506;
  outline: 1px solid #2a2b2e;
  outline-offset: -1px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
}

[data-theme="watt"] .theme-control-bar {
  --c-surface: 24 25 26;
  --c-surface-muted: 40 41 44;
  --c-line: 74 75 78;
  background-image: var(--perspex);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 8px 18px rgb(0 0 0 / 0.6);
  color: rgb(var(--c-ink));
  accent-color: #f5f5f2;
}

[data-theme="watt"] .theme-chat {
  --c-surface: 14 14 15;
  background-image: var(--weave);
  box-shadow: inset 0 0 0 1px #3a3b3e;
}

[data-theme="watt"] .theme-card {
  background-image: var(--perspex);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.15), 0 4px 10px rgb(0 0 0 / 0.5);
}

/* ---------- Top Boost: black basketweave, brown diamond grille, white piping, maroon panel ---------- */

[data-theme="top_boost"] {
  --c-jewel: 200 32 42;
  --c-page: 21 21 21;
  --c-surface: 30 30 30;
  --c-surface-muted: 42 42 42;
  --c-ink: 244 241 234;
  --c-ink-muted: 217 210 196;
  --c-ink-subtle: 176 168 152;
  --c-line: 66 62 58;
  --c-accent: 107 26 36;
  --c-accent-strong: 130 40 58;
  --c-accent-ink: 255 255 255;
  --c-success: 241 232 210;
  --c-success-strong: 255 248 230;
  --c-success-ink: 30 18 10;
  --c-danger: 224 40 46;
  --c-danger-strong: 190 30 36;
  --c-danger-ink: 255 255 255;
  --c-link: 227 201 160;
  --c-link-hover: 244 241 234;

  --piping: #f4f1ea;
  --diamond: repeating-linear-gradient(45deg, rgb(214 178 128 / 0.1) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(-45deg, rgb(214 178 128 / 0.1) 0 1px, transparent 1px 11px),
    linear-gradient(180deg, #4e3523, #442e1d);
  --maroon: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.03) 0 1px, transparent 1px 2px),
    linear-gradient(180deg, #82283a 0%, #6b1a24 45%, #4e121a 100%);

  font-family: Karla, ui-sans-serif, system-ui, sans-serif;
  background-image: repeating-linear-gradient(0deg, rgb(255 255 255 / 0.02) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.2) 0 1px, transparent 1px 3px);
}

[data-theme="top_boost"] :is(h1, h2, h3) {
  font-family: Righteous, ui-rounded, sans-serif;
  font-weight: 400;
}

[data-theme="top_boost"] .theme-site-header {
  border-bottom-color: var(--piping);
  border-radius: 0;
}

[data-theme="top_boost"] .theme-wordmark {
  color: #f4f1ea;
}

[data-theme="top_boost"] .theme-lobby {
  --c-ink-subtle: 240 228 206;
  background-image: var(--diamond);
  box-shadow: inset 0 0 0 3px var(--piping);
  color: #f4f1ea;
}

[data-theme="top_boost"] .theme-player {
  border: 3px solid var(--piping);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
}

/* The maroon panel: white legends, darker maroon "on" buttons and pickers, cream slider thumbs. */
[data-theme="top_boost"] .theme-control-bar {
  --c-ink: 255 255 255;
  --c-ink-muted: 255 255 255;
  --c-ink-subtle: 236 208 212;
  --c-surface: 78 18 26;
  --c-surface-muted: 100 30 40;
  --c-line: 150 70 82;
  background-image: var(--maroon);
  box-shadow: inset 0 0 0 2px var(--piping), inset 0 1px 0 rgb(255 255 255 / 0.15), 0 4px 12px rgb(0 0 0 / 0.4);
  color: rgb(var(--c-ink));
  accent-color: #f1e8d2;
}

[data-theme="top_boost"] .theme-chat {
  --c-surface: 28 20 14;
  --c-ink-subtle: 217 199 168;
  background-image: var(--diamond);
  box-shadow: inset 0 0 0 3px var(--piping);
}

[data-theme="top_boost"] .theme-card {
  background: #1c1c1c;
  box-shadow: inset 0 0 0 2px var(--piping);
}

/* ---------- The sign-in combo amp ---------- */

/* Tweed and Orange frame their grille from the outside, which would spill over the combo's cabinet and
   control panel; inside the combo the frame is drawn on the inside of the grille instead. */
[data-theme="tweed"] .amp-combo .theme-lobby {
  box-shadow: inset 0 0 0 6px #5a2f16, inset 0 0 0 7px rgb(255 210 160 / 0.3);
}

[data-theme="orange"] .amp-combo .theme-lobby {
  box-shadow: inset 0 0 0 6px var(--frame);
}

/* The cabinet frames the combo, so its control panel needs no outer frame or drop shadow of its own. */
[data-theme] .amp-combo .theme-control-bar {
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.2);
}