/* =========================================================
   FIGHTDLE — SHARED BRAND LAYER
   Loaded before every page stylesheet. Owns: fonts, design
   tokens, focus states, motion preferences.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:wght@500;600;700&display=swap');

:root {
  /* --- Type --- */
  --font-display: 'Anton', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-body: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;

  /* --- Brand --- */
  --gold: #c4a26a;
  --gold-bright: #d9b77a;
  --gold-dim: #8f7648;

  /* --- Surfaces --- */
  --panel: #1e1e1e;
  --panel-2: #2b2b2b;
  --panel-3: #3b3b3b;
  --ink: #ffffff;
  --ink-soft: #dddddd;

  /* --- Feedback --- */
  --correct: #2ecc71;
  --wrong: #e74c3c;
  --partial: #e67e22;

  /* --- Shape & depth --- */
  --radius: 15px;
  --radius-sm: 8px;
  --shadow: 0 8px 15px rgba(0, 0, 0, .3);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, .5);

  /* --- Motion --- */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --speed: .25s;
}

/* Predictable sizing everywhere. */
*, *::before, *::after { box-sizing: border-box; }

/* Stop iOS inflating text in landscape. */
html { -webkit-text-size-adjust: 100%; }

/* Crisper type on dark backgrounds. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display face for anything headline-ish. Letter-spacing because
   Anton is tight by default and reads as a wall at large sizes. */
h1, h2, h3, h4,
.mode-label,
button,
input[type="submit"] {
  font-family: var(--font-display);
  letter-spacing: .02em;
  font-weight: 400;
}

/* --- Visible keyboard focus (the site previously had none) --- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Don't show the ring on mouse click, only keyboard. */
:where(a, button, input, select, textarea, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* --- Respect reduced-motion requests --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}