:root {
  --bg-main: #0c0b0a;
  --bg-panel: rgba(20, 17, 15, 0.9);
  --bg-hero: #0f1317;
  --accent: #cfa34a;
  --accent-strong: #ffdd86;
  --text-main: #f2e8d5;
  --text-muted: #b7a98a;
  --border-soft: rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.22);
  --sea-top: #102330;
  --sea-bottom: #0b1a24;
  --land-core: #3f3a33;
  --land-edge: #201b15;

  --region-north: rgba(111, 159, 189, 0.25);
  --region-vale: rgba(119, 153, 209, 0.24);
  --region-riverlands: rgba(150, 113, 98, 0.28);
  --region-reach: rgba(122, 179, 102, 0.3);
  --region-westerlands: rgba(173, 119, 74, 0.3);
  --region-stormlands: rgba(195, 167, 92, 0.28);
  --region-dorne: rgba(196, 118, 86, 0.32);
  --region-crownlands: rgba(165, 115, 160, 0.26);
  --region-ironislands: rgba(87, 107, 126, 0.28);
  --region-essos: rgba(83, 149, 168, 0.22);
  --region-slaver: rgba(140, 93, 151, 0.24);
}

html.theme-dark {
  --bg-main: #050607;
  --bg-panel: #0d0f11;
  --bg-hero: #0a0f12;
  --accent: #9cd7ff;
  --accent-strong: #c9e8ff;
  --text-main: #e8f0ff;
  --text-muted: #99a6b7;
  --border-soft: rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.2);
  --sea-top: #0f1f2c;
  --sea-bottom: #0a141d;
  --land-core: #24303a;
  --land-edge: #0f141b;

  --region-north: rgba(133, 194, 231, 0.24);
  --region-vale: rgba(156, 182, 232, 0.23);
  --region-riverlands: rgba(182, 148, 130, 0.26);
  --region-reach: rgba(155, 214, 152, 0.26);
  --region-westerlands: rgba(211, 167, 126, 0.26);
  --region-stormlands: rgba(230, 202, 132, 0.25);
  --region-dorne: rgba(224, 152, 120, 0.28);
  --region-crownlands: rgba(199, 153, 204, 0.24);
  --region-ironislands: rgba(118, 152, 170, 0.25);
  --region-essos: rgba(111, 184, 201, 0.22);
  --region-slaver: rgba(168, 128, 180, 0.22);
}

.region--north { fill: var(--region-north); }
.region--vale { fill: var(--region-vale); }
.region--riverlands { fill: var(--region-riverlands); }
.region--reach { fill: var(--region-reach); }
.region--westerlands { fill: var(--region-westerlands); }
.region--stormlands { fill: var(--region-stormlands); }
.region--dorne { fill: var(--region-dorne); }
.region--crownlands { fill: var(--region-crownlands); }
.region--ironislands { fill: var(--region-ironislands); }
.region--essos { fill: var(--region-essos); }
.region--slaver { fill: var(--region-slaver); }

body {
  color: var(--text-main);
}