/* WordroW Design System */

:root {
  /* Color palette */
  --color-bg: hsl(220, 40%, 98%);
  --color-bg-gradient: linear-gradient(135deg, hsl(220 50% 97%) 0%, hsl(230 40% 93%) 50%, hsl(260 30% 95%) 100%);
  --color-text: hsl(218, 30%, 15%);
  --color-text-muted: hsl(218, 20%, 45%);
  --color-accent: hsl(29, 100%, 50%);
  --color-accent-hover: hsl(29, 88%, 88%);
  --color-success: hsl(145, 55%, 85%);
  --color-error: hsl(0, 55%, 88%);
  --color-surface: white;
  --color-surface-alt: hsl(220, 20%, 96%);
  --color-border: hsl(0, 0%, 46%);
  --color-shadow: hsla(218, 80%, 70%, 0.3);

  /* Tile colors */
  --tile-bg: hsl(0, 0%, 75%);
  --tile-border: hsl(0, 0%, 50%);
  --tile-good-bg: hsl(120, 60%, 80%);
  --tile-good-border: hsl(120, 100%, 25%);
  --tile-error-bg: hsl(0, 100%, 88%);
  --tile-error-border: hsl(0, 100%, 50%);
  --tile-choose-bg: hsl(210, 100%, 85%);
  --tile-choose-border: hsl(240, 100%, 50%);
  --tile-shadow: hsla(218, 80%, 85%, 0.5);

  /* Leaderboard tile colors */
  --lb-blue-bg: hsl(210, 100%, 85%);
  --lb-blue-border: hsl(240, 100%, 50%);
  --lb-green-bg: hsl(120, 60%, 80%);
  --lb-green-border: hsl(120, 100%, 25%);
  --lb-red-bg: hsl(0, 100%, 88%);
  --lb-red-border: hsl(0, 100%, 50%);
  --lb-gray-bg: hsl(0, 0%, 75%);
  --lb-gray-border: hsl(0, 0%, 50%);
  --lb-yellow-bg: hsl(60, 100%, 88%);
  --lb-yellow-border: hsl(45, 100%, 50%);

  /* Typography */
  --font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 2vh;

  /* Spacing & Shape */
  --radius: 0.25rem;
  --radius-lg: 0.5rem;
}

/* Dark mode — via system preference OR manual toggle */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: hsl(225, 25%, 10%);
    --color-bg-gradient: linear-gradient(135deg, hsl(225 25% 10%) 0%, hsl(240 20% 14%) 50%, hsl(260 15% 12%) 100%);
    --color-text: hsl(220, 20%, 92%);
    --color-text-muted: hsl(220, 15%, 58%);
    --color-accent: hsl(29, 100%, 55%);
    --color-accent-hover: hsl(29, 70%, 30%);
    --color-success: hsl(145, 40%, 22%);
    --color-error: hsl(0, 40%, 22%);
    --color-surface: hsl(225, 22%, 15%);
    --color-surface-alt: hsl(225, 18%, 20%);
    --color-border: hsl(220, 15%, 35%);
    --color-shadow: hsla(225, 50%, 5%, 0.6);

    --tile-bg: hsl(225, 18%, 26%);
    --tile-border: hsl(220, 15%, 38%);
    --tile-good-bg: hsl(140, 35%, 22%);
    --tile-good-border: hsl(140, 55%, 38%);
    --tile-error-bg: hsl(0, 35%, 22%);
    --tile-error-border: hsl(0, 55%, 42%);
    --tile-choose-bg: hsl(215, 35%, 28%);
    --tile-choose-border: hsl(215, 55%, 48%);
    --tile-shadow: hsla(225, 40%, 8%, 0.5);

    --lb-blue-bg: hsl(215, 35%, 28%);
    --lb-blue-border: hsl(215, 55%, 48%);
    --lb-green-bg: hsl(140, 35%, 22%);
    --lb-green-border: hsl(140, 55%, 38%);
    --lb-red-bg: hsl(0, 35%, 22%);
    --lb-red-border: hsl(0, 55%, 42%);
    --lb-gray-bg: hsl(225, 18%, 26%);
    --lb-gray-border: hsl(220, 15%, 38%);
    --lb-yellow-bg: hsl(45, 35%, 22%);
    --lb-yellow-border: hsl(45, 55%, 48%);
  }
}

/* Manual dark mode override */
:root[data-theme="dark"] {
  --color-bg: hsl(225, 25%, 10%);
  --color-bg-gradient: linear-gradient(135deg, hsl(225 25% 10%) 0%, hsl(240 20% 14%) 50%, hsl(260 15% 12%) 100%);
  --color-text: hsl(220, 20%, 92%);
  --color-text-muted: hsl(220, 15%, 58%);
  --color-accent: hsl(29, 100%, 55%);
  --color-accent-hover: hsl(29, 70%, 30%);
  --color-success: hsl(145, 40%, 22%);
  --color-error: hsl(0, 40%, 22%);
  --color-surface: hsl(225, 22%, 15%);
  --color-surface-alt: hsl(225, 18%, 20%);
  --color-border: hsl(220, 15%, 35%);
  --color-shadow: hsla(225, 50%, 5%, 0.6);

  --tile-bg: hsl(225, 18%, 26%);
  --tile-border: hsl(220, 15%, 38%);
  --tile-good-bg: hsl(140, 35%, 22%);
  --tile-good-border: hsl(140, 55%, 38%);
  --tile-error-bg: hsl(0, 35%, 22%);
  --tile-error-border: hsl(0, 55%, 42%);
  --tile-choose-bg: hsl(215, 35%, 28%);
  --tile-choose-border: hsl(215, 55%, 48%);
  --tile-shadow: hsla(225, 40%, 8%, 0.5);

  --lb-blue-bg: hsl(215, 35%, 28%);
  --lb-blue-border: hsl(215, 55%, 48%);
  --lb-green-bg: hsl(140, 35%, 22%);
  --lb-green-border: hsl(140, 55%, 38%);
  --lb-red-bg: hsl(0, 35%, 22%);
  --lb-red-border: hsl(0, 55%, 42%);
  --lb-gray-bg: hsl(225, 18%, 26%);
  --lb-gray-border: hsl(220, 15%, 38%);
  --lb-yellow-bg: hsl(45, 35%, 22%);
  --lb-yellow-border: hsl(45, 55%, 48%);
}

/* Base reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100dvh;
  max-width: 50vh;
  margin: 0 auto;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: bold;
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image: var(--color-bg-gradient);
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-user-select: none;
  padding: 0.25em;
  transition: background-color 1s;
}

body.green {
  background-color: var(--color-success);
  transition: background-color 0.1s;
}

body.red {
  background-color: var(--color-error);
  transition: background-color 0.1s;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.green, body.red {
    background-color: var(--color-bg);
  }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

p {
  font-weight: normal;
}

a {
  color: var(--color-text);
}

/* Theme toggle */
.theme-toggle {
  position: fixed;
  top: 0.75em;
  right: 0.75em;
  z-index: 200;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1em;
  box-shadow: 0 2px 8px var(--color-shadow);
  transition: background-color 0.3s, border-color 0.3s;
  line-height: 1;
  padding: 0;
}

.theme-toggle:hover {
  background: var(--color-surface-alt);
}

[hidden] {
  display: none !important;
}