/* Gambitle design tokens + base element styles. v0.2 "Tournament Hall".
   Load this BEFORE styles.css. Both theme blocks (light default, dark via
   media query) and the explicit data-theme overrides live here, plus the
   element-level resets. Components live in styles.css.

   Identity: graphite ink + porcelain bone + tournament gold. Neutral
   chrome is monochrome (ink buttons on porcelain, bone buttons on
   graphite); gold is reserved for the brand mark, the streak, selection
   on the board, and win moments; scarlet and green stay semantic
   (wrong/correct) and map to the share grid. No cream, no coral, no
   navy, no teal. Every text/background pair was checked against WCAG AA
   (4.5:1, or 3:1 for large text/UI); keep it that way when touching
   colors. */

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Charter, Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* light theme, the default: porcelain + ink + gold */
  --bg: #f1f0ea;
  --bg-raised: #fafaf6;
  --bg-sunken: #e4e4da;
  --text: #1a1c18;
  --text-soft: #565a4f;
  --border: #d2d3c6;
  --border-strong: #9a9c8d;

  --gold: #b3892b;             /* decorative accent: marks, rings, glows */
  --gold-text: #6f5510;        /* gold tone dark enough to be TEXT (AA 6.1:1) */
  --gold-wash: #efe4c8;        /* faint gold surface tint for lit states */
  --ink: #21231e;              /* the ink side of the identity */
  --btn-primary-bg: #21231e;
  --btn-primary-bg-hover: #2c2f28;
  --btn-primary-bg-active: #15170f;
  --btn-primary-fg: #f7f6f1;

  --correct: #2b6a4a;
  --correct-bg: #d9e8de;
  --wrong: #a93325;
  --wrong-bg: #f0dcd6;
  --pip-empty: #dddcd0;

  --sq-light: #ecebe0;
  --sq-dark: #4b4f44;
  --piece-white-fill: #f6f4e8;
  --piece-white-line: #14150f;
  --piece-black-fill: #191b14;
  --piece-black-line: rgba(240, 238, 225, 0.55);
  --coord-on-light: #6d7163;
  --coord-on-dark: #d4d3c4;
  --select-ring: #b3892b;
  --target-dot: rgba(179, 137, 43, 0.85);
  --check-wash: rgba(169, 51, 37, 0.55);
  --last-move-wash: rgba(179, 137, 43, 0.35);

  --shadow-sm: 0 1px 0 rgba(26, 28, 24, 0.12);
  --shadow-md: 0 2px 0 rgba(26, 28, 24, 0.18), 0 10px 24px rgba(26, 28, 24, 0.10);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131410;
    --bg-raised: #1d1f19;
    --bg-sunken: #0c0d0a;
    --text: #ece9dd;
    --text-soft: #a8a999;
    --border: #34362c;
    --border-strong: #565948;

    --gold: #d8ab3a;
    --gold-text: #e3bd55;
    --gold-wash: #2c2611;
    --ink: #e8e6d8;
    --btn-primary-bg: #e8e6d8;
    --btn-primary-bg-hover: #f3f1e4;
    --btn-primary-bg-active: #dbd9c9;
    --btn-primary-fg: #17180f;

    --correct: #63b287;
    --correct-bg: #1e3628;
    --wrong: #e06550;
    --wrong-bg: #3c1f19;
    --pip-empty: #34362c;

    --sq-light: #b2b09e;
    --sq-dark: #30322a;
    --piece-white-fill: #f3f1e4;
    --piece-white-line: #101208;
    --piece-black-fill: #12130d;
    --piece-black-line: rgba(236, 233, 221, 0.75);
    --coord-on-light: #43453a;
    --coord-on-dark: #8f9081;
    --select-ring: #d8ab3a;
    --target-dot: rgba(216, 171, 58, 0.85);
    --check-wash: rgba(224, 101, 80, 0.55);
    --last-move-wash: rgba(216, 171, 58, 0.32);

    --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 2px 0 rgba(0, 0, 0, 0.55), 0 12px 28px rgba(0, 0, 0, 0.45);
  }
}

/* explicit overrides win over the media query, either direction */
:root[data-theme="dark"] {
  --bg: #131410;
  --bg-raised: #1d1f19;
  --bg-sunken: #0c0d0a;
  --text: #ece9dd;
  --text-soft: #a8a999;
  --border: #34362c;
  --border-strong: #565948;
  --gold: #d8ab3a;
  --gold-text: #e3bd55;
  --gold-wash: #2c2611;
  --ink: #e8e6d8;
  --btn-primary-bg: #e8e6d8;
  --btn-primary-bg-hover: #f3f1e4;
  --btn-primary-bg-active: #dbd9c9;
  --btn-primary-fg: #17180f;
  --correct: #63b287;
  --correct-bg: #1e3628;
  --wrong: #e06550;
  --wrong-bg: #3c1f19;
  --pip-empty: #34362c;
  --sq-light: #b2b09e;
  --sq-dark: #30322a;
  --piece-white-fill: #f3f1e4;
  --piece-white-line: #101208;
  --piece-black-fill: #12130d;
  --piece-black-line: rgba(236, 233, 221, 0.75);
  --coord-on-light: #43453a;
  --coord-on-dark: #8f9081;
  --select-ring: #d8ab3a;
  --target-dot: rgba(216, 171, 58, 0.85);
  --check-wash: rgba(224, 101, 80, 0.55);
  --last-move-wash: rgba(216, 171, 58, 0.32);
  --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 0 rgba(0, 0, 0, 0.55), 0 12px 28px rgba(0, 0, 0, 0.45);
}

:root[data-theme="light"] {
  --bg: #f1f0ea;
  --bg-raised: #fafaf6;
  --bg-sunken: #e4e4da;
  --text: #1a1c18;
  --text-soft: #565a4f;
  --border: #d2d3c6;
  --border-strong: #9a9c8d;
  --gold: #b3892b;
  --gold-text: #6f5510;
  --gold-wash: #efe4c8;
  --ink: #21231e;
  --btn-primary-bg: #21231e;
  --btn-primary-bg-hover: #2c2f28;
  --btn-primary-bg-active: #15170f;
  --btn-primary-fg: #f7f6f1;
  --correct: #2b6a4a;
  --correct-bg: #d9e8de;
  --wrong: #a93325;
  --wrong-bg: #f0dcd6;
  --pip-empty: #dddcd0;
  --sq-light: #ecebe0;
  --sq-dark: #4b4f44;
  --piece-white-fill: #f6f4e8;
  --piece-white-line: #14150f;
  --piece-black-fill: #191b14;
  --piece-black-line: rgba(240, 238, 225, 0.55);
  --coord-on-light: #6d7163;
  --coord-on-dark: #d4d3c4;
  --select-ring: #b3892b;
  --target-dot: rgba(179, 137, 43, 0.85);
  --check-wash: rgba(169, 51, 37, 0.55);
  --last-move-wash: rgba(179, 137, 43, 0.35);
  --shadow-sm: 0 1px 0 rgba(26, 28, 24, 0.12);
  --shadow-md: 0 2px 0 rgba(26, 28, 24, 0.18), 0 10px 24px rgba(26, 28, 24, 0.10);
}

* {
  box-sizing: border-box;
}

/* The [hidden] attribute loses to any element that also gets an explicit
   "display" value from a class rule below (equal specificity, author
   style wins). Force it to actually hide. */
[hidden] {
  display: none !important;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

body {
  min-height: 100dvh;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
}

p {
  margin: 0 0 var(--space-3);
  line-height: 1.5;
}

a {
  color: var(--gold-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

button {
  font-family: inherit;
}

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}