/* ─────────────────────────────────────────────────────────────────────────
   Theme variations. Same layouts, same party; different paint and type.
   The invitation look ("classic") lives in base.css and needs nothing here.

     showroom   '65 dealership: chrome lettering, candy-apple red, Grabber Blue
     drive-in   Marquee night ('51, Steve's favorite movie year): amber bulbs,
                oxblood, cream, diner teal
     cobra      The white Cobra's racing stripes: asphalt, Wimbledon white,
                racing green, Mystic violet

   Pick one for everyone with THEME=<name> npm start, or preview it on one
   device with ?theme=<name> (?theme=party goes back to the server's choice).
   Fonts are only downloaded by browsers showing that theme.
   ───────────────────────────────────────────────────────────────────────── */

@font-face { font-family: "Archivo"; src: url("../fonts/themes/Archivo-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/themes/Archivo-italic.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; }
@font-face { font-family: "Mr Dafoe"; src: url("../fonts/themes/MrDafoe-normal-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

@font-face { font-family: "Alfa Slab One"; src: url("../fonts/themes/AlfaSlabOne-normal-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Bitter"; src: url("../fonts/themes/Bitter-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bitter"; src: url("../fonts/themes/Bitter-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Josefin Sans"; src: url("../fonts/themes/JosefinSans-normal.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "Damion"; src: url("../fonts/themes/Damion-normal-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

@font-face { font-family: "Barlow"; src: url("../fonts/themes/Barlow-normal-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/themes/Barlow-normal-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/themes/Barlow-normal-600.woff2") format("woff2"); font-weight: 600 650; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/themes/Barlow-normal-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/themes/Barlow-normal-800.woff2") format("woff2"); font-weight: 800 900; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/themes/BarlowCondensed-normal-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/themes/BarlowCondensed-normal-600.woff2") format("woff2"); font-weight: 600 650; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/themes/BarlowCondensed-normal-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/themes/BarlowCondensed-normal-800.woff2") format("woff2"); font-weight: 800 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/themes/BarlowCondensed-italic-500.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/themes/BarlowCondensed-italic-700.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/themes/BarlowCondensed-italic-800.woff2") format("woff2"); font-weight: 800 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Kaushan Script"; src: url("../fonts/themes/KaushanScript-normal-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* ── Showroom ───────────────────────────────────────────────────────────── */

[data-theme="showroom"] {
  --ink-rgb: 9 12 18;
  --ink-2-rgb: 17 22 31;
  --ivory-rgb: 236 241 246;
  --gold-rgb: 182 194 208;       /* chrome */
  --gold-hi-rgb: 236 242 248;
  --gold-lo-rgb: 112 124 140;
  --plum-rgb: 110 12 28;         /* showroom spot: candy apple */
  --plum-hi-rgb: 196 24 48;
  --emerald-rgb: 12 40 100;      /* showroom spot: Grabber Blue */
  --emerald-hi-rgb: 38 104 214;
  --bad-rgb: 255 92 110;
  --t0-hi-rgb: 255 77 94;
  --ink-0: #030406;
  --ink-3: #1a2130;
  --accent-deep: #808c9c;
  --on-accent: #0b0f16;
  --card-ink: #1f2836;
  --card-ink-dim: #4a5566;
  --card-accent: #c8102e;
  --confetti: #ecf2f8, #b6c2d0, #e0283f, #2668d6, #ffffff, #ff4d5e;

  --t0: #b80f27; --t0-ink: #fff4f4;                  /* A · Candy Apple   */
  --t1: #1d56b8; --t1-hi: #4a8af0; --t1-ink: #f2f7ff; /* B · Grabber Blue  */
  --t2: #c65a12; --t2-hi: #f08a3c; --t2-ink: #fff6ee; /* C · Competition Orange */
  --t3: #8995a6; --t3-hi: #dfe6ee; --t3-ink: #0e141c; /* D · Silver Frost  */

  --serif: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --script: "Mr Dafoe", "Snell Roundhand", cursive;
  --display-opsz: normal;
  --display-track: 0.005em;
  --radius-btn: 10px;
}
[data-theme="showroom"] .display {
  font-stretch: 125%; font-weight: 850; text-transform: uppercase; line-height: 0.95;
  /* Chrome: a bright sky, a hard horizon line, a dark road reflection. */
  background: linear-gradient(180deg, #ffffff 0%, #dfe6ee 44%, #6c7889 50%, #aeb9c6 58%, #f4f8fb 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgb(0 0 0 / 0.5));
}
/* Expanded caps run ~40% wider than Bodoni; keep the big titles on one line. */
[data-theme="showroom"] .lobby .title { font-size: calc(var(--u) * 5.6); }
[data-theme="showroom"] .join h1 { font-size: clamp(2.3rem, 11vw, 3rem); }
[data-theme="showroom"] .wait h2, [data-theme="showroom"] .verdict h2 { font-size: clamp(1.7rem, 8vw, 2.2rem); }
[data-theme="showroom"] .ha-title { font-size: clamp(36px, 4vw, 52px); }
[data-theme="showroom"] .script { color: #ff4d5e; }
[data-theme="showroom"] .btn:not(.ghost) {
  color: #fff;
  background: linear-gradient(180deg, #ff5a6b, #d7203a 52%, #9c0c20);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.45) inset, 0 -2px 0 rgb(0 0 0 / 0.25) inset, 0 10px 28px rgb(215 32 58 / 0.35);
}
[data-theme="showroom"] .tile .text, [data-theme="showroom"] .q-prompt { font-stretch: 108%; }
[data-theme="showroom"] .eyebrow { font-stretch: 125%; letter-spacing: 0.26em; }
[data-theme="showroom"] .deco { --w: 2px; }
[data-theme="showroom"] .grain { opacity: 0.05; }

/* ── Drive-In '51 ───────────────────────────────────────────────────────── */

[data-theme="drive-in"] {
  --ink-rgb: 20 9 11;
  --ink-2-rgb: 33 15 18;
  --ivory-rgb: 251 241 221;      /* cream */
  --gold-rgb: 255 172 51;        /* marquee amber */
  --gold-hi-rgb: 255 214 128;
  --gold-lo-rgb: 176 104 20;
  --plum-rgb: 112 14 28;         /* cherry smoke */
  --plum-hi-rgb: 192 30 46;
  --emerald-rgb: 8 78 82;        /* diner teal */
  --emerald-hi-rgb: 26 150 150;
  --ink-0: #080304;
  --ink-3: #2b1418;
  --accent-deep: #c4740e;
  --on-accent: #2a1204;
  --card-ink: #3a1a14;
  --card-ink-dim: #6b4a3c;
  --card-accent: #b3122a;
  --confetti: #ffd680, #ffac33, #e2334a, #1a9696, #fbf1dd, #ff7a3d;

  --t0: #b8122b; --t0-ink: #fff4ea;                   /* A · Cherry        */
  --t1: #e8960c; --t1-hi: #ffc957; --t1-ink: #2a1204; /* B · Marquee Amber */
  --t2: #0f7f80; --t2-hi: #2bb5b1; --t2-ink: #effffd; /* C · Diner Teal    */
  --t3: #563297; --t3-hi: #8b62d0; --t3-ink: #f7f0ff; /* D · Flying Saucer */

  --serif: "Bitter", Rockwell, Georgia, serif;
  --display: "Alfa Slab One", "Rockwell Extra Bold", Rockwell, serif;
  --sans: "Josefin Sans", Futura, "Century Gothic", sans-serif;
  --script: "Damion", "Brush Script MT", cursive;
  --display-opsz: normal;
  --display-track: 0.01em;
  --radius-btn: 8px;
  font-synthesis: none; /* Alfa Slab and Damion have one weight; never fake bold */
}
[data-theme="drive-in"] .display { font-weight: 400; text-shadow: 0 0 0.35em rgb(var(--gold-rgb) / 0.35); }
[data-theme="drive-in"] .eyebrow, [data-theme="drive-in"] .pill, [data-theme="drive-in"] .btn { font-weight: 700; }
[data-theme="drive-in"] .q-prompt, [data-theme="drive-in"] .prompt { font-weight: 600; }
/* Marquee bulbs instead of gold corner brackets. */
[data-theme="drive-in"] .deco {
  --bulb: radial-gradient(circle, var(--gold-hi) 0 2.2px, rgb(var(--gold-rgb) / 0.45) 3px, transparent 4.5px);
  background:
    var(--bulb) top left / 16px 10px repeat-x,
    var(--bulb) bottom left / 16px 10px repeat-x,
    var(--bulb) top left / 10px 16px repeat-y,
    var(--bulb) top right / 10px 16px repeat-y,
    var(--bg);
  animation: marquee-chase 1.6s steps(2) infinite;
}
@keyframes marquee-chase { 50% { background-position: 8px 0, 8px 100%, 0 8px, 100% 8px, 0 0; } }
[data-theme="drive-in"] .join-card.deco { padding: calc(var(--u) * 2.6); }
[data-theme="drive-in"] .tile .letter { font-weight: 400; }

/* ── Cobra ──────────────────────────────────────────────────────────────── */

[data-theme="cobra"] {
  --ink-rgb: 11 13 12;
  --ink-2-rgb: 20 24 22;
  --ivory-rgb: 244 244 238;      /* Wimbledon white */
  --gold-rgb: 46 204 118;        /* racing green, lit */
  --gold-hi-rgb: 130 240 176;
  --gold-lo-rgb: 22 122 68;
  --plum-rgb: 60 28 130;         /* the purple Cobra */
  --plum-hi-rgb: 132 88 240;
  --emerald-rgb: 10 74 42;
  --emerald-hi-rgb: 30 150 86;
  --ink-0: #030404;
  --ink-3: #1c2220;
  --accent-deep: #149a52;
  --on-accent: #04140b;
  --card-ink: #14201a;
  --card-ink-dim: #4a5a52;
  --card-accent: #12804a;
  --confetti: #f4f4ee, #2ecc76, #8458f0, #ffffff, #1e9656, #c4b5fd;
  --good: #2ecc76;

  --t0: #17844a; --t0-hi: #2fc06f; --t0-ink: #effff5; /* A · Racing Green  */
  --t1: #d9d9d0; --t1-hi: #ffffff; --t1-ink: #121614; /* B · Wimbledon White */
  --t2: #5b34c4; --t2-hi: #8a64f2; --t2-ink: #f6f2ff; /* C · Mystic Violet */
  --t3: #c23a2c; --t3-hi: #ec6a4f; --t3-ink: #fff3ee; /* D · Rosso         */

  --serif: "Barlow Condensed", "Arial Narrow", sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --sans: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --script: "Kaushan Script", "Brush Script MT", cursive;
  --display-opsz: normal;
  --display-track: 0.01em;
  --radius-btn: 6px;
}
[data-theme="cobra"] .display { font-style: italic; font-weight: 800; text-transform: uppercase; line-height: 0.9; }
[data-theme="cobra"] .q-prompt, [data-theme="cobra"] .prompt { font-weight: 600; letter-spacing: 0; }
[data-theme="cobra"] .btn { font-style: italic; letter-spacing: 0.1em; }
[data-theme="cobra"] .script { color: var(--ivory); }
/* Twin hood stripes running under everything. */
[data-theme="cobra"] .atmos {
  background: linear-gradient(90deg,
    transparent calc(50% - 9vmin), rgb(var(--gold-rgb) / 0.07) calc(50% - 9vmin) calc(50% - 2.2vmin),
    transparent calc(50% - 2.2vmin) calc(50% + 2.2vmin),
    rgb(var(--gold-rgb) / 0.07) calc(50% + 2.2vmin) calc(50% + 9vmin), transparent calc(50% + 9vmin));
}
[data-theme="cobra"] .deco { --w: 3px; }