/* theme.css — design tokens. Restyle here; never hard-code colors in components. */
:root {
  /* Surfaces (dark tactical) */
  --bg:        #0e1116;
  --bg-2:      #141922;
  --panel:     #1a2130;
  --panel-2:   #212a3b;
  --panel-3:   #2a3648;
  --line:      #33405a;
  --line-soft: #26304259;

  /* Text */
  --text:      #e7edf6;
  --muted:     #93a1b8;
  --faint:     #64748b;

  /* Faction accents */
  --gold:      #d9a441;   /* Rome */
  --gold-2:    #f0c56a;
  --gold-dim:  #d9a4411f;
  --blue:      #4f9dd6;   /* Seleucid */
  --blue-2:    #7cc0ef;
  --blue-dim:  #4f9dd61f;
  --purple:    #b47cf0;   /* Major-city marker centres */
  --green:     #57c26e;   /* Map annotation palette */

  /* Semantic */
  --accent:    #6ea8fe;
  --good:      #4ec58a;
  --warn:      #e8b04b;
  --bad:       #e0655f;
  --neutral:   #7c8aa0;

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --display: "Trajan Pro", "Optima", "Segoe UI", var(--font);

  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Radii & shadow */
  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --shadow:    0 10px 30px -12px rgba(0,0,0,.7);
  --shadow-sm: 0 2px 8px -2px rgba(0,0,0,.5);
  --ring:      0 0 0 2px var(--accent);

  --tap: 44px;               /* minimum touch target */
  --topbar-h: 56px;
}

/* Faction helpers */
.faction-roman   { --fac: var(--gold); --fac-2: var(--gold-2); --fac-dim: var(--gold-dim); }
.faction-seleucid{ --fac: var(--blue); --fac-2: var(--blue-2); --fac-dim: var(--blue-dim); }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, #17202f 0%, transparent 60%),
    radial-gradient(1000px 500px at -10% 110%, #141b28 0%, transparent 55%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;              /* the stage scrolls, not the body */
}
h1,h2,h3 { margin: 0; font-weight: 600; }
button { font-family: inherit; }
kbd {
  font: 600 var(--fs-xs)/1 var(--mono);
  background: var(--panel-3); color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }