/* The widgets' themes (docs/widgets.md, "Themes"): each is only these variables, set on the element with data-theme.
   A widget's own CSS draws with them, so a new theme is one block here and every widget gets it.
   --accent can be overridden by the link (accent=) or a live theme message; --accent-ink is text drawn on the accent.
   --bg is solid; a widget can make it see-through by setting --bgo (0–1) on the same element (Chatagram's "Background"
   setting), so every theme's background colour carries / var(--bgo, 1). */
@font-face { font-family: "Lilita One"; src: url("../../assets/fonts/lilita-one.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("../../assets/fonts/chakra-petch-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("../../assets/fonts/chakra-petch-600.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Orbitron"; src: url("../../assets/fonts/orbitron.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Oxanium"; src: url("../../assets/fonts/oxanium-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Cinzel Decorative"; src: url("../../assets/fonts/cinzel-decorative-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Bungee"; src: url("../../assets/fonts/bungee.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../../assets/fonts/space-grotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

[data-theme] {
  --good: #3ddc84; --bad: #ff5a5a; --gold: #ffc93c;
  --font: "Chakra Petch", system-ui, sans-serif; --display: "Lilita One", system-ui, sans-serif; --display-weight: 400;
  /* a game's letters on their own (Chatagram's tiles and words): the display font unless a theme's can't tell them apart */
  --letters: var(--display); --letters-weight: var(--display-weight);
  --radius: 12px; --tile-ring: transparent; --tile-glow: none; --edge: none;
}
[data-theme=chatagram] {
  /* no coral frame round the card (the owner, 2026-10-09): the card's ink is enough */
  --bg: rgb(22 18 43 / var(--bgo, 1)); --panel: #221b40; --slot: #2f2656; --text: #fff7ec; --muted: #b4acd6; --accent: #ffc93c; --accent-ink: #16122b;
  --tile: #fff7ec; --tile-text: #16122b; --tile-edge: #ff5a5f; --radius: 12px;
}
[data-theme=neutral] {
  --bg: rgb(20 22 28 / var(--bgo, 1)); --panel: #262a35; --slot: #323746; --text: #f3f5f9; --muted: #9aa3b4; --accent: #4f8cff; --accent-ink: #fff;
  --tile: #f6f7fa; --tile-text: #15171d; --tile-edge: rgba(0,0,0,.28); --radius: 10px;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif; --display: system-ui, -apple-system, "Segoe UI", sans-serif; --display-weight: 900;
}
[data-theme=light] {
  --bg: rgb(250 250 252 / var(--bgo, 1)); --panel: #eceef3; --slot: #dde1e9; --text: #16181d; --muted: #5f6673; --accent: #ff5a36; --accent-ink: #fff;
  --tile: #16181d; --tile-text: #fff; --tile-edge: rgba(0,0,0,.3); --radius: 10px;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif; --display: system-ui, -apple-system, "Segoe UI", sans-serif; --display-weight: 900;
  --edge: 0 2px 12px rgba(0,0,0,.18);
}
[data-theme=neon] {
  --frame: 1px;   /* the frame's width (overlays sit inside it) */
  --bg: rgb(3 6 13 / var(--bgo, 1)); --panel: #070d18; --slot: #0d1a2c; --text: #e8f4ff; --muted: #8ba3bd; --accent: #22e5ff; --accent-ink: #03060d;
  --tile: #070d18; --tile-text: var(--accent); --tile-edge: transparent; --radius: 0px;
  --tile-ring: var(--accent); --tile-glow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
  --display: Orbitron, sans-serif; --display-weight: 800;
  /* Orbitron's A is its R without the leg, and its D and O are close: fine in a word, not on a lone tile (the owner, 2026-11-01) */
  --letters: Oxanium, Orbitron, sans-serif; --letters-weight: 800;
  --edge: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 22%, transparent);
}
[data-theme=candy] {
  --frame: 4px;   /* the frame's width (overlays sit inside it) */
  --bg: linear-gradient(160deg, rgb(123 60 240 / var(--bgo, 1)), rgb(90 34 201 / var(--bgo, 1))); --panel: rgba(40,10,110,.45); --slot: rgba(30,8,90,.55); --text: #fff; --muted: #e2d6ff; --accent: #ffd23f; --accent-ink: #3b1590;
  --tile: #fff; --tile-text: #3b1590; --tile-edge: #b69cff; --radius: 14px;
  --edge: inset 0 0 0 4px #a57cff, inset 0 -8px 0 rgba(0,0,0,.18);
}
[data-theme=royal] {
  --frame: 6px;   /* the frame's width (overlays sit inside it) */
  --bg: rgb(10 5 16 / var(--bgo, 1)); --panel: #1a0f24; --slot: #2a1838; --text: #fff4fb; --muted: #c6a9c9; --accent: #ff63b8; --accent-ink: #1a0712;
  --tile: #fff4fb; --tile-text: #5a1440; --tile-edge: #b8924a; --tile-ring: #ffd98a; --radius: 4px;
  --display: "Cinzel Decorative", Georgia, serif; --display-weight: 900;
  --edge: inset 0 0 0 1px #ffd98a88, inset 0 0 0 5px rgba(10,5,16,.94), inset 0 0 0 6px #ffd98a55, 0 0 30px #ff63b833;
}
[data-theme=deep] {
  --bg: linear-gradient(180deg, rgb(8 40 52 / var(--bgo, 1)), rgb(2 11 17 / var(--bgo, 1))); --panel: #06202b; --slot: #0b2f3c; --text: #eafcff; --muted: #8fbac2; --accent: #ffb36b; --accent-ink: #1b0f02;
  --tile: #ffb36b; --tile-text: #1b0f02; --tile-edge: #b86a26; --radius: 16px;
  --edge: inset 0 -5px 0 #45d6c833;
}
[data-theme=chaplinko] {
  --frame: 1px;   /* Chaplinko's brand: midnight, cobalt rims, a tangerine ball, jackpot pink (docs/widgets.md, "The Chaplinko page") */
  --bg: rgb(10 18 51 / var(--bgo, 1)); --panel: #121d4d; --slot: #1b2a66; --text: #eef3ff; --muted: #9fb0e0; --accent: #ff7a1a; --accent-ink: #1a0a00;
  --gold: #ff3d8b; --tile: #eef3ff; --tile-text: #0a1233; --tile-edge: #2f5bff; --radius: 16px;
  --font: "Space Grotesk", system-ui, sans-serif; --display: Bungee, system-ui, sans-serif; --display-weight: 400;
  --edge: inset 0 0 0 1px #2f5bff66, 0 0 32px #2f5bff26;
}
[data-theme=cozy] {
  --frame: 3px;   /* the frame's width (overlays sit inside it) */
  --bg: rgb(243 230 207 / var(--bgo, 1)); --panel: #ead7b5; --slot: #dcc49c; --text: #4a3222; --muted: #7a5a40; --accent: #d9653b; --accent-ink: #fffaf0;
  --tile: #fffaf0; --tile-text: #4a3222; --tile-edge: #b98c5a; --tile-ring: #e2cda8; --radius: 12px;
  --display: Georgia, "Iowan Old Style", "Palatino Linotype", serif; --display-weight: 700;
  --edge: inset 0 0 0 3px #c9a878, 0 6px 0 #9c7a4e;
}