/* 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;
}

html {
  scrollbar-gutter: stable;
}

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;
  padding: 0;
  overflow: hidden;
  text-align: center;
}

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

.theme-toggle::before {
  content: "";
  width: 1.2em;
  height: 1.2em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.theme-toggle[data-icon="moon"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2a44' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z'/%3E%3C/svg%3E");
}

.theme-toggle[data-icon="sun"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2a44' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2.5M12 19.5V22M4.93 4.93l1.77 1.77M17.3 17.3l1.77 1.77M2 12h2.5M19.5 12H22M4.93 19.07 6.7 17.3M17.3 6.7l1.77-1.77'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle[data-icon="moon"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z'/%3E%3C/svg%3E");
  }

  :root:not([data-theme="light"]) .theme-toggle[data-icon="sun"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2.5M12 19.5V22M4.93 4.93l1.77 1.77M17.3 17.3l1.77 1.77M2 12h2.5M19.5 12H22M4.93 19.07 6.7 17.3M17.3 6.7l1.77-1.77'/%3E%3C/svg%3E");
  }
}

:root[data-theme="dark"] .theme-toggle[data-icon="moon"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] .theme-toggle[data-icon="sun"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2.5M12 19.5V22M4.93 4.93l1.77 1.77M17.3 17.3l1.77 1.77M2 12h2.5M19.5 12H22M4.93 19.07 6.7 17.3M17.3 6.7l1.77-1.77'/%3E%3C/svg%3E");
}

[hidden] {
  display: none !important;
}