/* Holiday themes for the main page (../index.html): the same chat in a
   holiday's colors, kept quiet so it never gets in the way. Picking one
   from the theme menu puts data-holiday on <html> (src/main.ts -- the
   inline script in index.html does it on load, before anything draws).
   Each theme is a palette below, plus:
     garland.svg    hangs from the top bar, over the top of the chat
     a display font and an emoji for the greeting
   To add a holiday: copy a theme block, give it a folder, and list it in
   THEMES in src/main.ts. */

:root[data-holiday] {
  /* The garland's box, and how much of it the chat's first message clears. */
  --h-garland-height: 40px;
  --h-garland-clear: 36px;
  /* Display fonts differ a lot in size at the same font-size. */
  --h-font-scale: 1;
  --h-dot1: var(--accent-strong);
  --h-dot2: var(--accent-strong);
  --h-dot3: var(--accent-strong);
}

/* ---- The garland ---- */

/* Above the chat, so the garland hangs over it. */
:root[data-holiday] .topbar {
  z-index: 2;
}

:root[data-holiday] .topbar::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: var(--h-garland-height);
  background: var(--h-garland);
  opacity: 0.85;
  pointer-events: none;
}

:root[data-holiday] .chat {
  padding-top: calc(var(--h-garland-clear) + 18px);
}

/* ---- Small touches ---- */

:root[data-holiday] .brand-row::after {
  content: var(--h-hero-icon);
  margin-left: auto;
  font-size: 16px;
}

:root[data-holiday] ::selection {
  background: rgb(var(--accent-rgb) / 0.35);
}

:root[data-holiday] .msg.greeting .bubble {
  font-family: var(--h-font), var(--serif);
  font-size: calc(22px * var(--h-font-scale));
  color: var(--h-title);
}

:root[data-holiday] .typing span {
  background: var(--h-dot1);
}

:root[data-holiday] .typing span:nth-child(2) {
  background: var(--h-dot2);
}

:root[data-holiday] .typing span:nth-child(3) {
  background: var(--h-dot3);
}

/* ---- Start view ---- */

:root[data-holiday] .hero::before {
  content: var(--h-hero-icon);
  display: block;
  margin-bottom: 10px;
  font-size: 40px;
  line-height: 1;
}

:root[data-holiday] .hero-title {
  font-family: var(--h-font), var(--serif);
  font-size: calc(34px * var(--h-font-scale));
  line-height: 1.25;
  color: var(--h-title);
}

/* ---- The themes, in calendar order ---- */

/* 🥂 New Year's: black and gold, gold and silver bead swags. */
:root[data-holiday="new-year"] {
  --accent-rgb: 230 185 74;
  --accent: #e6b94a;
  --accent-strong: #f7dc8f;
  --accent-deep: #8a6414;
  --bg: #08070b;
  --bg-elevated: #14121a;
  --bg-soft: #1c1922;
  --panel: #14121a;
  --line: rgb(230 185 74 / 0.16);
  --line-strong: rgb(230 185 74 / 0.3);
  --text: #fbf6ea;
  --muted: #cdc3aa;
  --muted-2: #9a8f76;
  --sidebar-bg: rgb(12 11 16 / 0.95);

  --h-title: #f7dc8f;
  --h-font: "Cinzel Decorative";
  --h-font-scale: 0.82;
  --h-hero-icon: "🥂";
  --h-dot1: #f5d77e;
  --h-dot2: #d9dde6;
  --h-dot3: #ff8fb1;
  --h-garland: url(new-year/garland.svg) 0 0 / 160px 40px repeat-x;
}

/* 💘 Valentine's Day: rose and wine, strings of hearts. */
:root[data-holiday="valentines"] {
  --accent-rgb: 255 92 138;
  --accent: #ff5c8a;
  --accent-strong: #ffa3bd;
  --accent-deep: #a3173f;
  --bg: #12070b;
  --bg-elevated: #1f0c14;
  --bg-soft: #28111b;
  --panel: #1f0c14;
  --line: rgb(255 92 138 / 0.16);
  --line-strong: rgb(255 92 138 / 0.3);
  --text: #fff1f5;
  --muted: #e2b6c4;
  --muted-2: #b28294;
  --sidebar-bg: rgb(20 8 13 / 0.95);

  --h-title: #ffa3bd;
  --h-font: "Pacifico";
  --h-font-scale: 0.95;
  --h-hero-icon: "💘";
  --h-dot1: #ff5c8a;
  --h-dot2: #ffc2d1;
  --h-dot3: #c9184a;
  --h-garland: url(valentines/garland.svg) 0 0 / 160px 40px repeat-x;
}

/* ☘️ St. Patrick's Day: emerald and gold, a string of shamrocks. */
:root[data-holiday="st-patricks"] {
  --accent-rgb: 46 204 113;
  --accent: #2ecc71;
  --accent-strong: #8ff0b4;
  --accent-deep: #137a3f;
  --bg: #04100a;
  --bg-elevated: #0b1a12;
  --bg-soft: #102419;
  --panel: #0b1a12;
  --line: rgb(46 204 113 / 0.15);
  --line-strong: rgb(46 204 113 / 0.28);
  --text: #effcf3;
  --muted: #aad7ba;
  --muted-2: #7aa98b;
  --sidebar-bg: rgb(6 16 11 / 0.95);

  --h-title: #8ff0b4;
  --h-font: "Uncial Antiqua";
  --h-font-scale: 0.9;
  --h-hero-icon: "☘️";
  --h-dot1: #2ecc71;
  --h-dot2: #f2c94c;
  --h-dot3: #8ff0b4;
  --h-garland: url(st-patricks/garland.svg) 0 0 / 160px 40px repeat-x;
}

/* 🎆 Fourth of July: navy with red and white, flag bunting. */
:root[data-holiday="fourth-of-july"] {
  --accent-rgb: 107 140 255;
  --accent: #6b8cff;
  --accent-strong: #b9ccff;
  --accent-deep: #2a3f9e;
  --bg: #050a18;
  --bg-elevated: #0c1530;
  --bg-soft: #121d3e;
  --panel: #0c1530;
  --line: rgb(107 140 255 / 0.16);
  --line-strong: rgb(107 140 255 / 0.3);
  --text: #f4f7ff;
  --muted: #b5c1de;
  --muted-2: #8391b5;
  --sidebar-bg: rgb(6 11 26 / 0.95);

  --h-title: #f4f7ff;
  --h-font: "Alfa Slab One";
  --h-font-scale: 0.85;
  --h-hero-icon: "🎆";
  --h-dot1: #e63946;
  --h-dot2: #f4f4f4;
  --h-dot3: #6b8cff;
  --h-garland: url(fourth-of-july/garland.svg) 0 0 / 136px 34px repeat-x;
}

/* 🎃 Halloween: orange and purple at night, pumpkin bunting. */
:root[data-holiday="halloween"] {
  --accent-rgb: 255 138 31;
  --accent: #ff8a1f;
  --accent-strong: #ffc07a;
  --accent-deep: #a34700;
  --bg: #0b0710;
  --bg-elevated: #160e1e;
  --bg-soft: #1e1429;
  --panel: #160e1e;
  --line: rgb(255 138 31 / 0.16);
  --line-strong: rgb(255 138 31 / 0.3);
  --text: #fff4e8;
  --muted: #cbb8d9;
  --muted-2: #9481a8;
  --sidebar-bg: rgb(12 8 17 / 0.95);

  --h-title: #ff9a3c;
  --h-font: "Creepster";
  --h-font-scale: 1.15;
  --h-hero-icon: "🎃";
  --h-dot1: #ff8a1f;
  --h-dot2: #9b4dff;
  --h-dot3: #7cc242;
  --h-garland: url(halloween/garland.svg) 0 0 / 160px 40px repeat-x;
}

/* 🦃 Thanksgiving: harvest browns and amber, a vine of leaves. */
:root[data-holiday="thanksgiving"] {
  --accent-rgb: 232 145 58;
  --accent: #e8913a;
  --accent-strong: #f6c27a;
  --accent-deep: #9a4a14;
  --bg: #120b06;
  --bg-elevated: #1e140c;
  --bg-soft: #281b11;
  --panel: #1e140c;
  --line: rgb(232 145 58 / 0.16);
  --line-strong: rgb(232 145 58 / 0.3);
  --text: #fff5e9;
  --muted: #dcc2a6;
  --muted-2: #a98e72;
  --sidebar-bg: rgb(19 12 7 / 0.95);

  --h-title: #f6c27a;
  --h-font: "Berkshire Swash";
  --h-hero-icon: "🦃";
  --h-dot1: #e8590c;
  --h-dot2: #f59f00;
  --h-dot3: #c92a2a;
  --h-garland: url(thanksgiving/garland.svg) 0 0 / 160px 40px repeat-x;
}

/* 🕎 Hanukkah: midnight blue and silver, bunting. */
:root[data-holiday="hanukkah"] {
  --accent-rgb: 77 141 255;
  --accent: #4d8dff;
  --accent-strong: #a9c8ff;
  --accent-deep: #1f4fb8;
  --bg: #050b1a;
  --bg-elevated: #0b1530;
  --bg-soft: #111d3d;
  --panel: #0b1530;
  --line: rgb(77 141 255 / 0.16);
  --line-strong: rgb(77 141 255 / 0.3);
  --text: #f2f6ff;
  --muted: #b4c4e2;
  --muted-2: #8395ba;
  --sidebar-bg: rgb(6 11 26 / 0.95);

  --h-title: #cfe0ff;
  --h-font: "Suez One";
  --h-font-scale: 0.95;
  --h-hero-icon: "🕎";
  --h-dot1: #4d8dff;
  --h-dot2: #dbe7ff;
  --h-dot3: #8ea3c4;
  --h-garland: url(hanukkah/garland.svg) 0 0 / 160px 40px repeat-x;
}

/* 🎄 Christmas: pine green, red and gold, a string of lights. */
:root[data-holiday="christmas"] {
  /* Gold for tints and lines -- red ones go muddy on the green. */
  --accent-rgb: 244 210 122;
  --accent: #d4343f;
  --accent-strong: #f4d27a;
  --accent-deep: #8c1c24;
  --bg: #04100b;
  --bg-elevated: #0b1b13;
  --bg-soft: #10261a;
  --panel: #0b1b13;
  --line: rgb(244 210 122 / 0.14);
  --line-strong: rgb(244 210 122 / 0.26);
  --text: #f3fbf6;
  --muted: #bad4c4;
  --muted-2: #87a695;
  --sidebar-bg: rgb(5 16 11 / 0.95);

  --h-title: #fdf6ec;
  --h-font: "Mountains of Christmas";
  --h-font-scale: 1.15;
  --h-hero-icon: "🎄";
  --h-dot1: #e0474f;
  --h-dot2: #f4d27a;
  --h-dot3: #3fbf74;
  --h-garland: url(christmas/garland.svg) 0 0 / 160px 40px repeat-x;
}