/* Dragonwatch design tokens — the palette and type scale of the approved
   ØMEGA Hall canvas, lifted out of the mockup's inline styles so that
   discrete values live here and only per-datum geometry stays inline. */

:root {
  /* surfaces */
  --bg:        #0b0d12;
  --panel:     #12161f;
  --panel-2:   #141922;
  --panel-3:   #191d26;
  --sunken:    #0e1219;

  /* borders, light to heavy */
  --border-3:  #1c2230;
  --border:    #232a38;
  --border-2:  #2c3446;
  --border-gold: #6a5426;

  /* accent */
  --gold:      #d9b45b;
  --gold-2:    #e6c87d;
  --gold-3:    #efd28c;
  --gold-dim:  #8a7645;

  /* text */
  --text:      #e8e4da;
  --text-2:    #f0ece2;
  --heading:   #cfc9bb;
  --muted:     #8d93a3;
  --muted-2:   #7f8698;
  --muted-3:   #6d7486;

  /* semantic */
  --green:     #62b28a;
  --green-2:   #8fd9b3;
  --red:       #d87a7a;
  --red-2:     #e89aa0;
  --blue:      #7fa7d8;
  --purple:    #c9a0d8;
  --slate:     #5b6b8a;   /* farms, against --gold for mains */

  /* type */
  --font-head: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num:  'Barlow Condensed', 'Barlow', system-ui, sans-serif;

  /* radii */
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 6px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-3); }
::selection { background: var(--gold); color: var(--bg); }

img { max-width: 100%; }
[hidden] { display: none !important; }

/* Tabular figures everywhere numbers are compared in a column, or the
   leaderboard shimmers as values update. */
.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

@keyframes pulseDot { 0%,100% { opacity:.35 } 50% { opacity:1 } }

/* Visible focus for keyboard users — the mockup's inline styles could not
   express :focus-visible at all, which left clickable rows reading as dead
   text for anyone not using a mouse. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}