/* TeacherTimers — theme variables, shared by every tool. Add new themes here. */
/* ============================================================
   TeacherTimers — styles
   Each theme sets the same custom properties on body[data-theme].
   ============================================================ */

:root {
  --ui-font: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 999px;
}

/* ---------- Themes ---------- */

body[data-theme="classic"] {
  --bg: #f6f5f1;
  --fg: #1b1f27;
  --ui: #1b1f27;
  --muted: #6b7280;
  --accent: #2563eb;
  --accent-ink: #fff;
  --surface: rgba(27, 31, 39, .06);
  --surface-hover: rgba(27, 31, 39, .12);
  --track: rgba(27, 31, 39, .1);
  --bar: #2563eb;
  --warn: #d97706;
  --danger: #dc2626;
  --clock-font: "Outfit", sans-serif;
  --clock-shadow: none;
  --dw: .6; --cw: .3;
  --sheet: #ffffff;
  --sheet-ink: #1b1f27;
}

body[data-theme="dark"] {
  --bg: #0b0d12;
  --fg: #f5f7fb;
  --ui: #e5e7eb;
  --muted: #9ca3af;
  --accent: #facc15;
  --accent-ink: #111;
  --surface: rgba(255, 255, 255, .08);
  --surface-hover: rgba(255, 255, 255, .16);
  --track: rgba(255, 255, 255, .12);
  --bar: #facc15;
  --warn: #fb923c;
  --danger: #f87171;
  --clock-font: "Outfit", sans-serif;
  --clock-shadow: none;
  --dw: .6; --cw: .3;
  --sheet: #171a21;
  --sheet-ink: #f5f7fb;
}

body[data-theme="chalkboard"] {
  --bg:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.07), transparent 55%),
    radial-gradient(ellipse at 75% 80%, rgba(255,255,255,.05), transparent 50%),
    linear-gradient(160deg, #2f5d46, #234a37 60%, #1d3f2f);
  --fg: #f4f1e6;
  --ui: #f4f1e6;
  --muted: rgba(244, 241, 230, .7);
  --accent: #f6e27a;
  --accent-ink: #1d3f2f;
  --surface: rgba(255, 255, 255, .1);
  --surface-hover: rgba(255, 255, 255, .18);
  --track: rgba(255, 255, 255, .15);
  --bar: #f4f1e6;
  --warn: #f6c97a;
  --danger: #ff9a8a;
  --clock-font: "Cabin Sketch", "Comic Sans MS", cursive;
  --clock-shadow: 0 0 .02em rgba(255,255,255,.8), 0 0 .08em rgba(255,255,255,.25);
  --dw: .58; --cw: .28;
  --sheet: #234a37;
  --sheet-ink: #f4f1e6;
}
body[data-theme="chalkboard"] #stage {
  border: clamp(10px, 1.6vw, 22px) solid #8a5a33;
  box-shadow: inset 0 0 0 3px #6b4224, inset 0 0 60px rgba(0,0,0,.35);
  border-image: linear-gradient(135deg, #a0693c, #7a4d2a 40%, #9a6438 70%, #6e4424) 1;
}

body[data-theme="space"] {
  --bg:
    radial-gradient(ellipse at 80% 10%, rgba(147, 51, 234, .35), transparent 50%),
    radial-gradient(ellipse at 10% 90%, rgba(14, 165, 233, .25), transparent 55%),
    linear-gradient(180deg, #050816, #0b1033 60%, #120b2e);
  --fg: #c7f9ff;
  --ui: #e0e7ff;
  --muted: #a5b4fc;
  --accent: #22d3ee;
  --accent-ink: #050816;
  --surface: rgba(165, 180, 252, .12);
  --surface-hover: rgba(165, 180, 252, .22);
  --track: rgba(165, 180, 252, .15);
  --bar: linear-gradient(90deg, #22d3ee, #a855f7);
  --warn: #fbbf24;
  --danger: #fb7185;
  --clock-font: "Orbitron", sans-serif;
  --clock-shadow: 0 0 .05em rgba(34, 211, 238, .9), 0 0 .18em rgba(34, 211, 238, .45);
  --dw: .72; --cw: .3;
  --sheet: #0f1538;
  --sheet-ink: #e0e7ff;
}

body[data-theme="ocean"] {
  --bg:
    radial-gradient(ellipse at 50% -10%, rgba(255,255,255,.35), transparent 45%),
    linear-gradient(180deg, #38bdf8, #0ea5e9 30%, #0369a1 70%, #0c4a6e);
  --fg: #ffffff;
  --ui: #f0f9ff;
  --muted: rgba(240, 249, 255, .8);
  --accent: #fde047;
  --accent-ink: #0c4a6e;
  --surface: rgba(255, 255, 255, .18);
  --surface-hover: rgba(255, 255, 255, .3);
  --track: rgba(255, 255, 255, .25);
  --bar: #fde047;
  --warn: #fdba74;
  --danger: #ff6b6b;
  --clock-font: "Fredoka", sans-serif;
  --clock-shadow: 0 .04em 0 #075985, 0 .08em .15em rgba(7, 89, 133, .5);
  --dw: .6; --cw: .28;
  --sheet: #075985;
  --sheet-ink: #f0f9ff;
}

body[data-theme="jungle"] {
  --bg:
    radial-gradient(ellipse at 20% 0%, rgba(190, 242, 100, .25), transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(21, 128, 61, .6), transparent 60%),
    linear-gradient(170deg, #166534, #14532d 55%, #0f3d22);
  --fg: #fef08a;
  --ui: #ecfccb;
  --muted: rgba(236, 252, 203, .75);
  --accent: #fb923c;
  --accent-ink: #1a2e05;
  --surface: rgba(236, 252, 203, .14);
  --surface-hover: rgba(236, 252, 203, .24);
  --track: rgba(236, 252, 203, .18);
  --bar: linear-gradient(90deg, #a3e635, #fef08a);
  --warn: #fb923c;
  --danger: #f87171;
  --clock-font: "Lilita One", sans-serif;
  --clock-shadow: 0 .05em 0 #052e16, 0 .1em .2em rgba(0,0,0,.35);
  --dw: .56; --cw: .26;
  --sheet: #14532d;
  --sheet-ink: #ecfccb;
}

body[data-theme="candy"] {
  --bg:
    radial-gradient(circle at 15% 20%, #fff1f7 0 8%, transparent 9%),
    radial-gradient(circle at 85% 75%, #fff1f7 0 6%, transparent 7%),
    linear-gradient(160deg, #fbcfe8, #f9a8d4 45%, #c4b5fd);
  --fg: #db2777;
  --ui: #831843;
  --muted: #9d174d;
  --accent: #db2777;
  --accent-ink: #fff;
  --surface: rgba(255, 255, 255, .45);
  --surface-hover: rgba(255, 255, 255, .7);
  --track: rgba(255, 255, 255, .55);
  --bar: repeating-linear-gradient(-45deg, #ec4899 0 14px, #fff 14px 28px);
  --warn: #ea580c;
  --danger: #be123c;
  --clock-font: "Chewy", cursive;
  --clock-shadow: .025em .025em 0 #fff, -.025em -.025em 0 #fff, .025em -.025em 0 #fff, -.025em .025em 0 #fff, 0 .07em 0 #9d174d;
  --dw: .56; --cw: .25;
  --sheet: #fdf2f8;
  --sheet-ink: #831843;
}

body[data-theme="arcade"] {
  --bg:
    linear-gradient(rgba(236, 72, 153, .12) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(236, 72, 153, .12) 1px, transparent 1px) 0 0 / 40px 40px,
    radial-gradient(ellipse at 50% 120%, #3b0764, #09090b 65%);
  --fg: #a3ff12;
  --ui: #f5f5f5;
  --muted: #a1a1aa;
  --accent: #ec4899;
  --accent-ink: #fff;
  --surface: rgba(255, 255, 255, .08);
  --surface-hover: rgba(255, 255, 255, .16);
  --track: rgba(255, 255, 255, .12);
  --bar: #a3ff12;
  --warn: #facc15;
  --danger: #ff3b5c;
  --clock-font: "Press Start 2P", monospace;
  --clock-shadow: .06em .06em 0 #ec4899, 0 0 .2em rgba(163, 255, 18, .45);
  --dw: 1; --cw: .7;
  --sheet: #18181b;
  --sheet-ink: #f5f5f5;
}
body[data-theme="arcade"] .clock { font-size: min(calc(88cqw / var(--w)), 48cqh); }
body[data-theme="arcade"] .done,
body[data-theme="arcade"] .label { font-family: "Press Start 2P", monospace; letter-spacing: 0; }
body[data-theme="arcade"] .label { font-size: clamp(.8rem, 4cqh, 2.2rem); }
body[data-theme="arcade"] #stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px);
}

body[data-theme="snow"] {
  --bg:
    radial-gradient(ellipse at 50% 120%, #ffffff, transparent 55%),
    linear-gradient(180deg, #bfdbfe, #dbeafe 50%, #eff6ff);
  --fg: #1e3a8a;
  --ui: #1e3a8a;
  --muted: #3b5bab;
  --accent: #1d4ed8;
  --accent-ink: #fff;
  --surface: rgba(255, 255, 255, .55);
  --surface-hover: rgba(255, 255, 255, .85);
  --track: rgba(30, 58, 138, .12);
  --bar: linear-gradient(90deg, #60a5fa, #1d4ed8);
  --warn: #c2410c;
  --danger: #b91c1c;
  --clock-font: "Baloo 2", sans-serif;
  --clock-shadow: 0 .04em 0 #fff, 0 .08em .2em rgba(30, 58, 138, .25);
  --dw: .6; --cw: .28;
  --sheet: #f8fbff;
  --sheet-ink: #1e3a8a;
}

body[data-theme="science"] {
  --bg:
    radial-gradient(ellipse at 50% 40%, rgba(34, 211, 238, .14), transparent 60%),
    linear-gradient(180deg, #0b1d2e, #0f2f3d 55%, #0a2530);
  --fg: #e0fbff;
  --ui: #cffafe;
  --muted: rgba(207, 250, 254, .7);
  --accent: #a3e635;
  --accent-ink: #0b1d2e;
  --surface: rgba(103, 232, 249, .1);
  --surface-hover: rgba(103, 232, 249, .2);
  --track: rgba(103, 232, 249, .15);
  --bar: linear-gradient(90deg, #a3e635, #22d3ee);
  --warn: #fbbf24;
  --danger: #fb7185;
  --clock-font: "Space Mono", ui-monospace, monospace;
  --clock-shadow: 0 .04em 0 #164e63, 0 0 .14em rgba(34, 211, 238, .45);
  --dw: .62; --cw: .3;
  --sheet: #0f2f3d;
  --sheet-ink: #e0fbff;
}

body[data-theme="travel"] {
  --bg:
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(120, 86, 46, .28)),
    linear-gradient(170deg, #f6ead0, #efdcb4 60%, #e3c994);
  --fg: #1e3a5f;
  --ui: #5b4636;
  --muted: #7c6248;
  --accent: #c2410c;
  --accent-ink: #fff;
  --surface: rgba(91, 70, 54, .1);
  --surface-hover: rgba(91, 70, 54, .2);
  --track: rgba(91, 70, 54, .18);
  --bar: linear-gradient(90deg, #0f766e, #c2410c);
  --warn: #b45309;
  --danger: #b91c1c;
  --clock-font: "Alfa Slab One", Georgia, serif;
  --clock-shadow: .03em .03em 0 #f6ead0, -.03em -.03em 0 #f6ead0, .03em -.03em 0 #f6ead0, -.03em .03em 0 #f6ead0, .05em .07em 0 #c2410c;
  --dw: .66; --cw: .3;
  --sheet: #f6ead0;
  --sheet-ink: #3b2a1c;
}

/* ---------- Holiday themes ---------- */

body[data-theme="halloween"] {
  --bg:
    radial-gradient(ellipse at 50% 120%, rgba(255,138,31,.25), transparent 55%),
    linear-gradient(180deg, #12061f, #2d1450 55%, #1a0b2e);
  --fg: #ff8a1f;
  --ui: #f3e8ff;
  --muted: rgba(243, 232, 255, .7);
  --accent: #ff8a1f;
  --accent-ink: #1a0b2e;
  --surface: rgba(243, 232, 255, .1);
  --surface-hover: rgba(243, 232, 255, .2);
  --track: rgba(243, 232, 255, .14);
  --bar: linear-gradient(90deg, #a855f7, #ff8a1f);
  --warn: #facc15;
  --danger: #ff4d4d;
  --clock-font: "Creepster", cursive;
  --clock-shadow: 0 .04em 0 #4a1d0a, 0 0 .12em rgba(255, 138, 31, .55);
  --dw: .55; --cw: .25;
  --sheet: #1f0f38;
  --sheet-ink: #f3e8ff;
}

body[data-theme="harvest"] {
  --bg:
    radial-gradient(ellipse at 50% 0%, rgba(254, 240, 138, .45), transparent 55%),
    linear-gradient(180deg, #f59e0b, #ea580c 55%, #9a3412);
  --fg: #fff7e6;
  --ui: #fff7e6;
  --muted: rgba(255, 247, 230, .8);
  --accent: #7c2d12;
  --accent-ink: #fff7e6;
  --surface: rgba(124, 45, 18, .25);
  --surface-hover: rgba(124, 45, 18, .4);
  --track: rgba(124, 45, 18, .3);
  --bar: #fff7e6;
  --warn: #fde047;
  --danger: #450a0a;
  --clock-font: "Grandstander", sans-serif;
  --clock-shadow: 0 .05em 0 #7c2d12, 0 .09em .18em rgba(124, 45, 18, .45);
  --dw: .62; --cw: .28;
  --sheet: #7c2d12;
  --sheet-ink: #fff7e6;
}

body[data-theme="holidays"] {
  --bg:
    radial-gradient(ellipse at 50% 110%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(180deg, #0b2b22, #0f3b2e 50%, #071d17);
  --fg: #ffffff;
  --ui: #fef3c7;
  --muted: rgba(254, 243, 199, .75);
  --accent: #dc2626;
  --accent-ink: #fff;
  --surface: rgba(255, 255, 255, .1);
  --surface-hover: rgba(255, 255, 255, .2);
  --track: rgba(255, 255, 255, .15);
  --bar: repeating-linear-gradient(-45deg, #dc2626 0 14px, #fff 14px 28px);
  --warn: #fbbf24;
  --danger: #f87171;
  --clock-font: "Berkshire Swash", cursive;
  --clock-shadow: 0 .05em 0 #b91c1c, 0 0 .15em rgba(255, 255, 255, .3);
  --dw: .55; --cw: .25;
  --sheet: #0f3b2e;
  --sheet-ink: #fef3c7;
}

body[data-theme="valentine"] {
  --bg:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.2), transparent 50%),
    linear-gradient(180deg, #f43f5e, #fb7185 45%, #e11d48);
  --fg: #ffffff;
  --ui: #fff1f2;
  --muted: rgba(255, 241, 242, .85);
  --accent: #ffffff;
  --accent-ink: #be123c;
  --surface: rgba(255, 255, 255, .25);
  --surface-hover: rgba(255, 255, 255, .4);
  --track: rgba(255, 255, 255, .35);
  --bar: #ffffff;
  --warn: #fde047;
  --danger: #4c0519;
  --clock-font: "Lobster", cursive;
  --clock-shadow: 0 .05em 0 #9f1239, 0 .09em .2em rgba(159, 18, 57, .35);
  --dw: .55; --cw: .24;
  --sheet: #be123c;
  --sheet-ink: #fff1f2;
}

body[data-theme="stpatricks"] {
  --bg:
    radial-gradient(ellipse at 80% 10%, rgba(253, 224, 71, .25), transparent 50%),
    linear-gradient(180deg, #22c55e, #15803d 55%, #14532d);
  --fg: #fde047;
  --ui: #f0fdf4;
  --muted: rgba(240, 253, 244, .8);
  --accent: #fde047;
  --accent-ink: #14532d;
  --surface: rgba(240, 253, 244, .16);
  --surface-hover: rgba(240, 253, 244, .28);
  --track: rgba(240, 253, 244, .2);
  --bar: linear-gradient(90deg, #ef4444, #f97316, #facc15, #22c55e, #3b82f6, #8b5cf6);
  --warn: #fb923c;
  --danger: #ff6b6b;
  --clock-font: "Luckiest Guy", sans-serif;
  --clock-shadow: 0 .05em 0 #052e16, 0 .09em .15em rgba(0, 0, 0, .3);
  --dw: .6; --cw: .26;
  --sheet: #14532d;
  --sheet-ink: #f0fdf4;
}

/* ---------- Sports themes ---------- */

body[data-theme="soccer"], body[data-theme="football"], body[data-theme="baseball"] {
  --bg: linear-gradient(180deg, #16a34a, #15803d 60%, #166534);
  --fg: #ffffff;
  --ui: #f0fdf4;
  --muted: rgba(240, 253, 244, .8);
  --accent: #facc15;
  --accent-ink: #14532d;
  --surface: rgba(0, 0, 0, .18);
  --surface-hover: rgba(0, 0, 0, .3);
  --track: rgba(255, 255, 255, .2);
  --bar: #ffffff;
  --warn: #fde047;
  --danger: #ff6b6b;
  --clock-shadow: 0 .05em 0 #14532d, 0 .09em .18em rgba(0, 0, 0, .35);
  --sheet: #14532d;
  --sheet-ink: #f0fdf4;
}
body[data-theme="soccer"] { --clock-font: "Russo One", sans-serif; --dw: .62; --cw: .28; }
body[data-theme="football"] { --clock-font: "Graduate", serif; --dw: .62; --cw: .28; --bar: #facc15; --clock-shadow: 0 .05em 0 #052e16, 0 .09em .18em rgba(0, 0, 0, .35); }
body[data-theme="baseball"] {
  --bg: linear-gradient(180deg, #22c55e, #16a34a 55%, #15803d);
  --clock-font: "Ultra", serif; --dw: .66; --cw: .3;
  --accent: #b91c1c; --accent-ink: #fff;
  --clock-shadow: 0 .05em 0 #1e3a8a, 0 .09em .18em rgba(0, 0, 0, .3);
  --sheet: #1e3a8a; --sheet-ink: #f8fafc;
}

body[data-theme="basketball"] {
  --bg: linear-gradient(180deg, #e0a96d, #d4945a 55%, #c07d45);
  --fg: #ffffff;
  --ui: #fff7ed;
  --muted: rgba(255, 247, 237, .85);
  --accent: #ea580c;
  --accent-ink: #fff;
  --surface: rgba(67, 20, 7, .22);
  --surface-hover: rgba(67, 20, 7, .35);
  --track: rgba(67, 20, 7, .25);
  --bar: #ea580c;
  --warn: #fde047;
  --danger: #ff3b3b;
  --clock-font: "Bungee", sans-serif;
  --clock-shadow: 0 .05em 0 #7c2d12, 0 .09em .18em rgba(67, 20, 7, .45);
  --dw: .66; --cw: .3;
  --sheet: #7c2d12;
  --sheet-ink: #fff7ed;
}

body[data-theme="hockey"] {
  --bg: linear-gradient(180deg, #f8fafc, #eef6fb 55%, #dbeafe);
  --fg: #1e3a8a;
  --ui: #1e3a8a;
  --muted: #3b5bab;
  --accent: #dc2626;
  --accent-ink: #fff;
  --surface: rgba(30, 58, 138, .08);
  --surface-hover: rgba(30, 58, 138, .16);
  --track: rgba(30, 58, 138, .12);
  --bar: linear-gradient(90deg, #2563eb, #dc2626);
  --warn: #c2410c;
  --danger: #dc2626;
  --clock-font: "Chakra Petch", sans-serif;
  --clock-shadow: .03em .03em 0 #fff, -.03em -.03em 0 #fff, .03em -.03em 0 #fff, -.03em .03em 0 #fff, 0 .07em 0 #93c5fd;
  --dw: .6; --cw: .28;
  --sheet: #f8fafc;
  --sheet-ink: #1e3a8a;
}

/* ---------- Animal themes ---------- */

body[data-theme="dinos"] {
  --bg: linear-gradient(180deg, #38bdf8, #a5f3fc 45%, #fef3c7 80%, #fde68a);
  --fg: #166534;
  --ui: #14532d;
  --muted: #3f6212;
  --accent: #f97316;
  --accent-ink: #fff;
  --surface: rgba(255, 255, 255, .6);
  --surface-hover: rgba(255, 255, 255, .85);
  --track: rgba(20, 83, 45, .15);
  --bar: linear-gradient(90deg, #84cc16, #f97316);
  --warn: #c2410c;
  --danger: #b91c1c;
  --clock-font: "Bangers", sans-serif;
  --clock-shadow: .03em .03em 0 #fff, -.03em -.03em 0 #fff, .03em -.03em 0 #fff, -.03em .03em 0 #fff, 0 .07em 0 #052e16;
  --dw: .5; --cw: .22;
  --sheet: #fefce8;
  --sheet-ink: #14532d;
}

body[data-theme="axolotl"] {
  --bg:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.5), transparent 50%),
    linear-gradient(180deg, #a5f3fc, #c4b5fd 55%, #f5d0fe);
  --fg: #ec4899;
  --ui: #6b21a8;
  --muted: #7e22ce;
  --accent: #ec4899;
  --accent-ink: #fff;
  --surface: rgba(255, 255, 255, .5);
  --surface-hover: rgba(255, 255, 255, .75);
  --track: rgba(255, 255, 255, .55);
  --bar: linear-gradient(90deg, #ff5c9a, #c084fc);
  --warn: #ea580c;
  --danger: #be123c;
  --clock-font: "Sniglet", sans-serif;
  --clock-shadow: .03em .03em 0 #fff, -.03em -.03em 0 #fff, .03em -.03em 0 #fff, -.03em .03em 0 #fff, 0 .07em 0 #9d174d;
  --dw: .6; --cw: .26;
  --sheet: #faf5ff;
  --sheet-ink: #581c87;
}

body[data-theme="turtles"] {
  --bg:
    radial-gradient(ellipse at 50% -10%, rgba(255,255,255,.4), transparent 45%),
    linear-gradient(180deg, #67e8f9, #06b6d4 35%, #0e7490 75%, #164e63);
  --fg: #ffffff;
  --ui: #ecfeff;
  --muted: rgba(236, 254, 255, .8);
  --accent: #a3e635;
  --accent-ink: #1a2e05;
  --surface: rgba(255, 255, 255, .18);
  --surface-hover: rgba(255, 255, 255, .3);
  --track: rgba(255, 255, 255, .25);
  --bar: #a3e635;
  --warn: #fde047;
  --danger: #ff6b6b;
  --clock-font: "Titan One", sans-serif;
  --clock-shadow: 0 .05em 0 #155e75, 0 .09em .18em rgba(21, 94, 117, .45);
  --dw: .62; --cw: .27;
  --sheet: #155e75;
  --sheet-ink: #ecfeff;
}