/* Dark theme is default (:root). Light overrides everything below. */

/* ── Light mode variable overrides ── */
body.light {
  --bg:          #eae4d1;
  --surface:     #d8c9a8;
  --surface-2:   #caba94;
  --surface-3:   #bcab80;
  --border:      #6b4820;
  --border-soft: #9a7038;
  --gold:        #6b4e18;
  --gold-dim:    #8a6828;
  --gold-soft:   rgba(107, 78, 24, 0.13);
  /* --gold is dark on this theme (unlike the dark themes' light gold), so text painted
     directly on a full-strength --gold surface needs to flip light, not stay the
     default --on-gold dark ink from main.css — otherwise it's dark-on-dark and
     unreadable. Mirrors the flip js/theme.js already does for custom themes. */
  --on-gold:     #f5f0e8;
  /* --gold above is darkened for text/border readability on this theme's light panels —
     far too close in hue/lightness to this theme's own map background to read as a
     highlight there (measured ~1.9:1 contrast, well under the ~3:1 non-text minimum).
     A dedicated, brighter value for map content only — see the --map-accent comment in
     main.css. A more contrast-optimized but darker candidate (#8c5c10) read as muddy
     brown rather than a bright "selected" gold; this vivid amber pops instead, chosen
     by direct visual comparison against all four light themes' actual map backgrounds,
     not contrast math alone. Shared across all light themes deliberately, the same way
     the dark themes' plain --gold is already close to identical across all of them. */
  --map-accent:  #ffb300;
  --text:        #1e0e02;
  --text-muted:  #6e5030;
  --danger:      #9a2020;
  --danger-dim:  #782020;
  --success:     #2a6040;

  --shadow-1: 0 1px 3px rgba(30,14,2,0.14);
  --shadow-2: 0 6px 20px rgba(30,14,2,0.20);
  --shadow-3: 0 16px 48px rgba(30,14,2,0.28);
}

/* ── Ember: warm dark red/black, campfire-at-night ── */
body.ember {
  --bg:          #1a0e0a;
  --surface:     #26140f;
  --surface-2:   #331b14;
  --surface-3:   #3f231a;
  --border:      #5c2f22;
  --border-soft: #472619;
  --gold:        #d4a24e;
  --gold-dim:    #96702f;
  --gold-soft:   rgba(212, 162, 78, 0.12);
  --map-accent:  var(--gold);
  --text:        #f2e6de;
  --text-muted:  #a8827a;
  --danger:      #e0553f;
  --danger-dim:  #9c3324;
  --success:     #6a9e4a;

  --shadow-1: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-2: 0 6px 20px rgba(0,0,0,0.5);
  --shadow-3: 0 16px 48px rgba(0,0,0,0.65);
}

/* ── Verdant: deep forest green/bronze, druidic ── */
body.verdant {
  --bg:          #0c130f;
  --surface:     #131f18;
  --surface-2:   #1a2921;
  --surface-3:   #21332a;
  --border:      #3a5240;
  --border-soft: #2c4033;
  --gold:        #c2a35a;
  --gold-dim:    #8a7440;
  --gold-soft:   rgba(194, 163, 90, 0.12);
  --map-accent:  var(--gold);
  --text:        #e6ede8;
  --text-muted:  #82998a;
  --danger:      #c25050;
  --danger-dim:  #8a3535;
  --success:     #5cae72;

  --shadow-1: 0 1px 3px rgba(0,0,0,0.35);
  --shadow-2: 0 6px 20px rgba(0,0,0,0.45);
  --shadow-3: 0 16px 48px rgba(0,0,0,0.6);
}

/* ── Arcane: indigo/violet, mystical ── */
body.arcane {
  --bg:          #0e0b1a;
  --surface:     #181228;
  --surface-2:   #211a35;
  --surface-3:   #2a2242;
  --border:      #453a6b;
  --border-soft: #362d54;
  --gold:        #c9a86a;
  --gold-dim:    #8f7748;
  --gold-soft:   rgba(201, 168, 106, 0.12);
  --map-accent:  var(--gold);
  --text:        #e9e5f5;
  --text-muted:  #8d84ad;
  --danger:      #c15468;
  --danger-dim:  #8a3548;
  --success:     #4f9e88;

  --shadow-1: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-2: 0 6px 20px rgba(0,0,0,0.5);
  --shadow-3: 0 16px 48px rgba(0,0,0,0.65);
}

/* ── Amber: muted terracotta/clay, Ember's light counterpart ── */
body.amber {
  --bg:          #e8d4c0;
  --surface:     #d9bfa3;
  --surface-2:   #cbac8c;
  --surface-3:   #bd9a76;
  --border:      #7a4a28;
  --border-soft: #9c6a42;
  --gold:        #8a5220;
  --gold-dim:    #a3703a;
  --gold-soft:   rgba(138, 82, 32, 0.14);
  --on-gold:     #f5f0e8; /* see the --on-gold comment on body.light above */
  --map-accent:  #ffb300; /* see the --map-accent comment on body.light above */
  --text:        #2e1608;
  --text-muted:  #6b4a30;
  --danger:      #a8402a;
  --danger-dim:  #82301e;
  --success:     #4a7a38;

  --shadow-1: 0 1px 3px rgba(46,22,8,0.16);
  --shadow-2: 0 6px 20px rgba(46,22,8,0.22);
  --shadow-3: 0 16px 48px rgba(46,22,8,0.30);
}

/* ── Sage: muted moss green, Verdant's light counterpart ── */
body.sage {
  --bg:          #d6dcc0;
  --surface:     #c4cca8;
  --surface-2:   #b3bc92;
  --surface-3:   #a1ab7c;
  --border:      #4a5a2e;
  --border-soft: #6b7a46;
  --gold:        #6e5c1c;
  --gold-dim:    #8a7530;
  --gold-soft:   rgba(110, 92, 28, 0.14);
  --on-gold:     #f5f0e8; /* see the --on-gold comment on body.light above */
  --map-accent:  #ffb300; /* see the --map-accent comment on body.light above */
  --text:        #1c2410;
  --text-muted:  #4e5a38;
  --danger:      #96382e;
  --danger-dim:  #762a22;
  --success:     #3a6e34;

  --shadow-1: 0 1px 3px rgba(28,36,16,0.16);
  --shadow-2: 0 6px 20px rgba(28,36,16,0.22);
  --shadow-3: 0 16px 48px rgba(28,36,16,0.30);
}

/* ── Wisteria: muted lavender, Arcane's light counterpart ── */
body.wisteria {
  --bg:          #dcd0e6;
  --surface:     #cabcda;
  --surface-2:   #b9a8cc;
  --surface-3:   #a795bd;
  --border:      #4a3868;
  --border-soft: #6e5490;
  --gold:        #6a5024;
  --gold-dim:    #866a38;
  --gold-soft:   rgba(106, 80, 36, 0.14);
  --on-gold:     #f5f0e8; /* see the --on-gold comment on body.light above */
  --map-accent:  #ffb300; /* see the --map-accent comment on body.light above */
  --text:        #1c1028;
  --text-muted:  #524062;
  --danger:      #92385a;
  --danger-dim:  #722848;
  --success:     #3a7060;

  --shadow-1: 0 1px 3px rgba(28,16,40,0.16);
  --shadow-2: 0 6px 20px rgba(28,16,40,0.22);
  --shadow-3: 0 16px 48px rgba(28,16,40,0.30);
}