/* ==========================================================================
   Design tokens
   Every colour, radius and type size in the v2 console resolves through these
   names. Dark is the primary palette; light is a full equivalent so the
   shared "crTheme" preference keeps working.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #F3F4F6;
  --surface-1: #FFFFFF;
  --surface-2: #F7F8FA;
  --surface-3: #EDEFF3;
  --surface-hover: #E8EBF0;
  --line: #E1E4EA;
  --line-strong: #C9CED8;

  /* Text */
  --text-1: #12151B;
  --text-2: #4A5263;
  --text-3: #7A8395;
  --text-inverse: #FFFFFF;

  /* Brand + semantic */
  --accent: #2F63D9;
  --accent-soft: rgba(47, 99, 217, 0.10);
  --brand: #9A7213;
  --pos: #18794E;
  --pos-soft: rgba(24, 121, 78, 0.10);
  --warn: #9A6200;
  --warn-soft: rgba(196, 128, 0, 0.13);
  --neg: #B4372A;
  --neg-soft: rgba(180, 55, 42, 0.10);
  --info: #0E6E9C;
  --info-soft: rgba(14, 110, 156, 0.11);
  --short: #6D4AD8;          /* 3-day (shortened) war marker */
  --short-soft: rgba(109, 74, 216, 0.12);
  --gold: #A27B12;
  --silver: #6E7787;
  --bronze: #A1592B;

  /* Effects */
  --scrim: rgba(15, 18, 24, 0.45);
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-pop: 0 12px 32px rgba(16, 24, 40, 0.16);
  --focus: 0 0 0 3px rgba(47, 99, 217, 0.35);

  /* Shape + type */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;

  /* Layout */
  --topbar-h: 56px;
  --gutter: clamp(12px, 2vw, 28px);

  /* War-log tiles */
  --wl-w: 46px;
  --wl-h: 30px;
  --wl-gap: 3px;
}

.theme-dark {
  color-scheme: dark;

  --bg: #0B0D12;
  --surface-1: #11141B;
  --surface-2: #151922;
  --surface-3: #1C212C;
  --surface-hover: #222836;
  --line: #222835;
  --line-strong: #323A4B;

  --text-1: #E7E9EE;
  --text-2: #A6AEBD;
  --text-3: #6E7788;
  --text-inverse: #0B0D12;

  --accent: #6E9BFF;
  --accent-soft: rgba(110, 155, 255, 0.14);
  --brand: #D2A954;
  --pos: #4CC38A;
  --pos-soft: rgba(76, 195, 138, 0.13);
  --warn: #E5AC3F;
  --warn-soft: rgba(229, 172, 63, 0.14);
  --neg: #F0705F;
  --neg-soft: rgba(240, 112, 95, 0.14);
  --info: #56B4E3;
  --info-soft: rgba(86, 180, 227, 0.14);
  --short: #A78BFA;
  --short-soft: rgba(167, 139, 250, 0.16);
  --gold: #E3B851;
  --silver: #AEB6C4;
  --bronze: #D08A5A;

  --scrim: rgba(3, 5, 9, 0.7);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.55);
  --focus: 0 0 0 3px rgba(110, 155, 255, 0.4);
}