/* ========================================
   COLOR SYSTEM
   ======================================== */

:root {
  /* Semantic color roles */
  --positive: oklch(65% 0.209 140);
  --positive-t-5: oklch(65% 0.209 140 / 50%);
  --negative: oklch(50% 0.37 20);
  --negative-glow: oklch(58.8% 0.37 20);
  --negative-t-5: oklch(50% 0.37 20 / 50%);

  /* Theme palette - Each theme defines base, glow, transparent, and background */
  /* GREEN */
  --green-base: oklch(79.2% 0.209 151.711);
  --green-glow: oklch(88% 0.209 151.711);
  --green-t-5: oklch(79.2% 0.209 151.711 / 50%);
  --green-bg-dark: #353c34;
  --green-bg-light: #f8f9f8;

  /* BLUE */
  --blue-base: oklch(65% 0.15 230);
  --blue-glow: oklch(73% 0.15 230);
  --blue-t-5: oklch(65% 0.15 230 / 50%);
  --blue-bg-dark: #2a3138;
  --blue-bg-light: #f8f9fb;

  /* RED */
  --red-base: oklch(62% 0.2 25);
  --red-glow: oklch(70% 0.2 25);
  --red-t-5: oklch(62% 0.2 25 / 50%);
  --red-bg-dark: #352a2a;
  --red-bg-light: #fbf8f8;

  /* PINK */
  --pink-base: oklch(75% 0.25 350);
  --pink-glow: oklch(83% 0.25 350);
  --pink-t-5: oklch(75% 0.25 350 / 50%);
  --pink-bg-dark: #3c2e3a;
  --pink-bg-light: #fdf8fc;

  /* PURPLE */
  --purple-base: oklch(70% 0.22 280);
  --purple-glow: oklch(78% 0.22 280);
  --purple-t-5: oklch(70% 0.22 280 / 50%);
  --purple-bg-dark: #342e3c;
  --purple-bg-light: #fbf8fd;

  /* ORANGE */
  --orange-base: oklch(75% 0.28 60);
  --orange-glow: oklch(83% 0.28 60);
  --orange-t-5: oklch(75% 0.28 60 / 50%);
  --orange-bg-dark: #3c3529;
  --orange-bg-light: #fcfaf8;

  /* BURGUNDY (defined but not currently used - add to ColorTheme type to enable) */
  --burgundy-base: oklch(55% 0.15 15);
  --burgundy-glow: oklch(63% 0.15 15);
  --burgundy-t-5: oklch(55% 0.15 15 / 50%);
  --burgundy-bg-dark: #3a2626;
  --burgundy-bg-light: #f9f5f5;

  /* Active theme tokens (semantic layer) */
  --color-primary: var(--green-base);
  --color-primary-glow: var(--green-glow);
  --color-primary-t-5: var(--green-t-5);

  /* Dark mode defaults */
  --site-bg: var(--green-bg-dark);
  --panel-color: oklch(27.81% 0.0296 256.85);
  --panel-hover-color: oklch(35% 0.0296 256.85);
  --text-color: #fff;
  --grey: #9d9d9d;
  --input-bg: #3e3e3e;

  /* Layout & animation tokens */
  --transition-default: 0.2s ease-in-out;
  --transition-fast: 0.1s ease-in-out;
  --transition-fluid: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  --line-height: 1.4;
  --gap: .8rem;
  --space: calc(var(--gap) * 2);
  --border-radius: 1rem;
  --min-body-width: 360px;

  /* Responsive breakpoints */
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;

  /* Max widths */
  --max-width-tablet: 700px;
  --max-width-desktop: 800px;

  /* Chart heights */
  --chart-height-mobile: 250px;
  --chart-height-tablet: 375px;
  --chart-height-desktop: 425px;

  /* Responsive spacing (optional overrides) */
  --gap-tablet: 1.2rem;
  --gap-desktop: 1.6rem;
}

/* ========================================
   DARK MODE THEMES
   ======================================== */

[data-theme="green"] {
  --color-primary: var(--green-base);
  --color-primary-glow: var(--green-glow);
  --color-primary-t-5: var(--green-t-5);
  --site-bg: var(--green-bg-dark);
}

[data-theme="blue"] {
  --color-primary: var(--blue-base);
  --color-primary-glow: var(--blue-glow);
  --color-primary-t-5: var(--blue-t-5);
  --site-bg: var(--blue-bg-dark);
}

[data-theme="red"] {
  --color-primary: var(--red-base);
  --color-primary-glow: var(--red-glow);
  --color-primary-t-5: var(--red-t-5);
  --site-bg: var(--red-bg-dark);
}

[data-theme="pink"] {
  --color-primary: var(--pink-base);
  --color-primary-glow: var(--pink-glow);
  --color-primary-t-5: var(--pink-t-5);
  --site-bg: var(--pink-bg-dark);
}

[data-theme="purple"] {
  --color-primary: var(--purple-base);
  --color-primary-glow: var(--purple-glow);
  --color-primary-t-5: var(--purple-t-5);
  --site-bg: var(--purple-bg-dark);
}

[data-theme="orange"] {
  --color-primary: var(--orange-base);
  --color-primary-glow: var(--orange-glow);
  --color-primary-t-5: var(--orange-t-5);
  --site-bg: var(--orange-bg-dark);
}

/* Uncomment to enable burgundy theme (also add 'burgundy' to ColorTheme type)
[data-theme="burgundy"] {
  --color-primary: var(--burgundy-base);
  --color-primary-glow: var(--burgundy-glow);
  --color-primary-t-5: var(--burgundy-t-5);
  --site-bg: var(--burgundy-bg-dark);
}
*/

/* ========================================
   LIGHT MODE OVERRIDES
   ======================================== */

/* Shared light mode values */
[data-mode="light"] {
  --text-color: #1a1a1a;
  --grey: #666;
  --input-bg: #fff;
}

/* Theme-specific light backgrounds and panels */
[data-theme="green"][data-mode="light"] {
  --site-bg: var(--green-bg-light);
  --panel-color: oklch(95% 0.01 140);
  --panel-hover-color: oklch(92% 0.01 140);
}

[data-theme="blue"][data-mode="light"] {
  --site-bg: var(--blue-bg-light);
  --panel-color: oklch(95% 0.01 220);
  --panel-hover-color: oklch(92% 0.01 220);
}

[data-theme="red"][data-mode="light"] {
  --site-bg: var(--red-bg-light);
  --panel-color: oklch(95% 0.01 20);
  --panel-hover-color: oklch(92% 0.01 20);
}

[data-theme="pink"][data-mode="light"] {
  --site-bg: var(--pink-bg-light);
  --panel-color: oklch(95% 0.01 350);
  --panel-hover-color: oklch(92% 0.01 350);
}

[data-theme="purple"][data-mode="light"] {
  --site-bg: var(--purple-bg-light);
  --panel-color: oklch(95% 0.01 280);
  --panel-hover-color: oklch(92% 0.01 280);
}

[data-theme="orange"][data-mode="light"] {
  --site-bg: var(--orange-bg-light);
  --panel-color: oklch(95% 0.01 60);
  --panel-hover-color: oklch(92% 0.01 60);
}

html {
  font-size: 62.5%;
  /* 62.5% of 16px = 10px */
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

body {
  font-size: 1.7rem;
  font-family: 'Noto Sans', sans-serif;
  background-color: var(--site-bg);
  margin: 0;
  padding: 0;
  min-height: 100%;
  color: var(--text-color);
  font-weight: 400;
  letter-spacing: 0.01rem;
  line-height: var(--line-height);
  transition: background-color var(--transition-default), color var(--transition-default);
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

.-column {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

*.-glow {
  box-shadow: 0 0 3px var(--color-primary-t-5);
}

*.-shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

button.-shadow:active,
.timer.-shadow:active {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.4),
    inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

label {
  display: block;
  margin-bottom: var(--gap);
  text-shadow: 0 .1rem .2rem rgba(255, 255, 255, 0.3);
}


@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

.blink {
  animation: blink 2s infinite;
}