:root {
  --primary-bg-light: #6dd3e7;
  --primary-bg-dark: #0b0013;
  --cloud-light: #f7e7eb;
  --cloud-dark: #1A1C24;
  --cloud2-light: #fafbf0;
  --cloud2-dark: #1a1c24;

  --text-on-dark: white;
  --text-on-light: black;
  --icon-number-light: #f0f0f0;
  --icon-number-dark: #12103b;
  --icon-bg-light: #fff;
  --icon-bg-dark: #191c51;
  --number-light: black;
  --number-dark: #ccc;

  --primary-bg: var(--primary-bg-light);
  --cloud-bg: var(--cloud-light);
  --cloud-bg2: var(--cloud2-light);
  --text: var(--text-on-light);
  --icon-number: var(--icon-number-light);
  --icon-bg: var(--icon-bg-light);
  --number: var(--number-light);

  /* Surface variables — theme-aware card/panel backgrounds */
  --surface-subtle: rgba(0, 0, 0, 0.04);
  --surface-border: rgba(0, 0, 0, 0.10);
  --surface-hover: rgba(0, 0, 0, 0.07);
  --surface-border-hover: rgba(0, 0, 0, 0.20);

  /* Mountains / horizon */
  --mtn-far-light:    #96c5d6;
  --mtn-mid-light:    #6eafc2;
  --mtn-near-light:   #4896ac;
  --mtn-ground-light: #2d6e7e;
  --mtn-far-dark:     #12103a;
  --mtn-mid-dark:     #0e0c2c;
  --mtn-near-dark:    #09071e;
  --mtn-ground-dark:  #050310;

  --mtn-far:    var(--mtn-far-light);
  --mtn-mid:    var(--mtn-mid-light);
  --mtn-near:   var(--mtn-near-light);
  --mtn-ground: var(--mtn-ground-light);

  /* Background image layers — light theme */
  --bg-mtn-far:     url('/assets/backgrounds/light/rocks_1.png') repeat-x bottom;
  --bg-mtn-mid:     none;
  --bg-mtn-near:    url('/assets/backgrounds/light/rocks_2.png') repeat-x bottom;
  --bg-mtn-closest: none;
  --mtn-mid-display:     none;
  --mtn-closest-display: none;

  /* Parallax ground layers */
  --ground-far-light:  #7fb565;
  --ground-mid-light:  #508a38;
  --ground-near-light: #2e5e1e;
  --ground-far-dark:   #152714;
  --ground-mid-dark:   #0d1a0b;
  --ground-near-dark:  #080d06;

  --ground-far:  var(--ground-far-light);
  --ground-mid:  var(--ground-mid-light);
  --ground-near: var(--ground-near-light);

  /* Resource stat text colors and strokes — light mode */
  --stat-color-pos:  #1a6600;
  --stat-color-neg:  #8b0000;
  --stat-stroke:     0px transparent;
  --stat-stroke-pos: 0px transparent;
  --stat-stroke-neg: 0px transparent;

  /* toggle theme*/
  --toggle-width: 60px;
  --toggle-height: 45px;
  --slider-bg: var(--primary-bg);

  /* Dirt texture overlay opacity */
  --dirt-opacity: 0.06;

  /* Navbar */
  --navbar-bg: url('/gui/wooden_texture.png') repeat;
  --navbar-blend-mode: normal;

  /* Secondary action button (light: warm parchment iron) */
  --action-secondary-bg: linear-gradient(to bottom, #c8a87a 0%, #a87f4a 50%, #7a5820 100%);
  --action-secondary-border: #7a5428;
  --action-secondary-color: #3d2000;
  --action-secondary-bg-hover: linear-gradient(to bottom, #d8b88a 0%, #b88f5a 50%, #8a6830 100%);
  --action-secondary-border-hover: #9a7448;

  /* GUI corner decorations */
  --gui-corner-url: url('/gui/gui_border2_light_50.png');
  --gui-ribbon-url: url('/gui/ribbon_light_3.png');

  /* Dirt texture */
  --dirt-texture-url: url('/gui/grunge_texture.jpg');
  --card-border-texture-url: url('/gui/whitenoise.png');

  /* Panel texture */
  --panel-texture-url: url('/gui/panel_texture_light2.png');
  --panel-bg: var(--cloud-bg);
  --resource-panel-border: rgba(101, 67, 33, 0.65);

  /* Card help tooltip — light: warm parchment */
  --help-panel-bg: linear-gradient(135deg, #f8eed8 0%, #f0e0bc 100%);
  --help-panel-border: rgba(139, 90, 43, 0.6);
  --help-panel-icon: #8b5e2a;
  --help-panel-text: #3d2000;

  /* Papyrus panels */
  --papyrus-fill: #F9CA8C;
  --papyrus-edge: #EAAD71;
  --papyrus-text: #3d2000;
  --papyrus-shape: polygon(
    0% 3%, 8% 0%, 17% 2%, 25% 0%, 33% 3%, 42% 1%,
    50% 0%, 58% 2%, 67% 0%, 75% 3%, 83% 1%, 92% 0%, 100% 2%,
    98% 8%, 100% 17%, 97% 25%, 100% 33%, 98% 42%,
    100% 50%, 97% 58%, 100% 67%, 98% 75%, 100% 83%, 97% 92%, 100% 100%,
    92% 97%, 83% 100%, 75% 98%, 67% 100%, 58% 97%,
    50% 100%, 42% 98%, 33% 100%, 25% 97%, 17% 100%, 8% 98%, 0% 100%,
    3% 92%, 0% 83%, 2% 75%, 0% 67%, 3% 58%,
    0% 50%, 2% 42%, 0% 33%, 3% 25%, 0% 17%, 2% 8%
  );
}

@media (prefers-color-scheme: dark) {
  :root {
    --dirt-opacity: 0.18;
    --dirt-texture-url: url('/gui/grunge_texture_dark.jpg');
    --navbar-bg: linear-gradient(to bottom, #3c424b 0%, #2c3138 40%, #1e2228 100%), url('/gui/wooden_texture.png') repeat;
    --navbar-blend-mode: multiply, normal;
    --action-secondary-bg: linear-gradient(to bottom, #3a3028 0%, #2a2018 50%, #1a1008 100%);
    --action-secondary-border: #504838;
    --action-secondary-color: #c8b898;
    --action-secondary-bg-hover: linear-gradient(to bottom, #4a4038 0%, #3a3028 50%, #2a2010 100%);
    --action-secondary-border-hover: #706850;
    --gui-corner-url: url('/gui/gui_border2_dark_50.png');
    --gui-ribbon-url: url('/gui/ribbon_dark_3.png');
    --panel-texture-url: url('/gui/panel_texture_dark.png');
    --panel-bg: rgba(32, 28, 44, 0.94);
    --resource-panel-border: rgba(140, 105, 55, 0.65);

    /* Card help tooltip — dark: deep purple with gold accent */
    --help-panel-bg: linear-gradient(135deg, #2b2336 0%, #3a2e4a 100%);
    --help-panel-border: #c89a4a;
    --help-panel-icon: #c89a4a;
    --help-panel-text: #e8d5b0;

    --papyrus-fill: #24180F;
    --papyrus-edge: #4A3320;
    --papyrus-text: #c8a060;
    --primary-bg: var(--primary-bg-dark);
    --cloud-bg: var(--cloud-dark);
    --cloud-bg2: var(--cloud2-dark);
    --mtn-far:    var(--mtn-far-dark);
    --mtn-mid:    var(--mtn-mid-dark);
    --mtn-near:   var(--mtn-near-dark);
    --mtn-ground: var(--mtn-ground-dark);
    --bg-mtn-far:     url('/assets/backgrounds/dark/rocks.png') repeat-x bottom;
    --bg-mtn-mid:     url('/assets/backgrounds/dark/ground_3.png') repeat-x bottom;
    --bg-mtn-near:    url('/assets/backgrounds/dark/ground_2.png') repeat-x bottom;
    --bg-mtn-closest: url('/assets/backgrounds/dark/ground_1.png') repeat-x bottom;
    --mtn-mid-display:     block;
    --mtn-closest-display: block;
    --ground-far:  var(--ground-far-dark);
    --ground-mid:  var(--ground-mid-dark);
    --ground-near: var(--ground-near-dark);
    --text: var(--text-on-dark);
    --icon-number: var(--icon-number-dark);
    --icon-bg: var(--icon-bg-dark);
    --number: var(--number-dark);
    --surface-subtle: rgba(255, 255, 255, 0.05);
    --surface-border: rgba(255, 255, 255, 0.10);
    --surface-hover: rgba(255, 255, 255, 0.08);
    --stat-color-pos:  #39ff14;
    --stat-color-neg:  #ff4455;
    --stat-stroke:     2px #000;
    --stat-stroke-pos: 2px #000;
    --stat-stroke-neg: 2px #000;
    --surface-border-hover: rgba(255, 255, 255, 0.30);
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --primary-bg: var(--primary-bg-light);
    --cloud-bg: var(--cloud-light);
    --cloud-bg2: var(--cloud2-light);
    --mtn-far:    var(--mtn-far-light);
    --mtn-mid:    var(--mtn-mid-light);
    --mtn-near:   var(--mtn-near-light);
    --mtn-ground: var(--mtn-ground-light);
    --ground-far:  var(--ground-far-light);
    --ground-mid:  var(--ground-mid-light);
    --ground-near: var(--ground-near-light);
    --text: var(--text-on-light);
    --icon-number: var(--icon-number-light);
    --icon-bg: var(--icon-bg-light);
    --number: var(--number-light);
  }
}