/* ═══════════════════════════════════════════════════════════════════════════
   themes.css — CSS custom properties for light/dark mode and color presets
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dark theme (default) ── */
:root,
.theme-dark {
  --color-bg: #1a1a2e;
  --color-surface: #16213e;
  --color-surface-2: #0f3460;
  --color-surface-3: #1a1a3e;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.15);

  --color-text: #e8e8f0;
  --color-text-muted: #8888a8;
  --color-text-subtle: #555570;

  --color-accent: #e94560;
  --color-accent-hover: #ff5f7a;
  --color-accent-2: #4a90d9;
  --color-accent-glow: rgba(233, 69, 96, 0.4);

  /* Tile colors */
  --tile-bg: linear-gradient(145deg, #e8e2d4, #d4cdb8);
  --tile-bg-free: linear-gradient(145deg, #f0ece0, #ddd8c4);
  --tile-bg-selected: linear-gradient(145deg, #fff9d0, #f5e870);
  --tile-bg-hint: linear-gradient(145deg, #d4f0d4, #b0e0b0);
  --tile-shadow-1: #b0a888;
  --tile-shadow-2: #9a9272;
  --tile-shadow-3: #847c5c;
  --tile-border: #c8c0a0;
  --tile-border-free: #b8b090;
  --tile-face-border-inner: rgba(255, 251, 240, 0.68);
  --tile-face-highlight: rgba(255, 255, 255, 0.62);
  --tile-face-shadow: rgba(112, 92, 56, 0.22);
  --tile-face-sheen: rgba(255, 255, 255, 0.24);
  --tile-side-border: #766d53;
  --tile-side-highlight: rgba(255, 248, 232, 0.16);
  --tile-text: #2c2416;

  /* Status bar */
  --status-bg: rgba(0, 0, 0, 0.4);
  --status-border: rgba(255, 255, 255, 0.06);

  /* Header */
  --header-bg: rgba(10, 10, 30, 0.85);
  --header-border: rgba(255, 255, 255, 0.06);

  /* Modals */
  --modal-overlay: rgba(0, 0, 0, 0.75);
  --modal-bg: #1e2340;
  --modal-border: rgba(255, 255, 255, 0.1);
  --modal-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255,255,255,0.05);

  /* Controls */
  --ctrl-bg: rgba(255, 255, 255, 0.06);
  --ctrl-bg-hover: rgba(255, 255, 255, 0.12);
  --ctrl-border: rgba(255, 255, 255, 0.1);

  /* Scrollbar */
  --scrollbar-thumb: rgba(255, 255, 255, 0.15);
  --scrollbar-track: transparent;
}

/* ── Light theme ── */
.theme-light {
  --color-bg: #f0ece4;
  --color-surface: #ffffff;
  --color-surface-2: #e8e4dc;
  --color-surface-3: #f5f0e8;
  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-strong: rgba(0, 0, 0, 0.15);

  --color-text: #1a1a2e;
  --color-text-muted: #666680;
  --color-text-subtle: #aaaacc;

  --color-accent: #c0392b;
  --color-accent-hover: #e74c3c;
  --color-accent-2: #2980b9;
  --color-accent-glow: rgba(192, 57, 43, 0.3);

  /* Tile colors */
  --tile-bg: linear-gradient(145deg, #f8f4ea, #ece8d8);
  --tile-bg-free: linear-gradient(145deg, #fff8f0, #f4efe0);
  --tile-bg-selected: linear-gradient(145deg, #fffce0, #f8f060);
  --tile-bg-hint: linear-gradient(145deg, #e0f8e0, #c0e8c0);
  --tile-shadow-1: #c8c0a0;
  --tile-shadow-2: #b8b090;
  --tile-shadow-3: #a8a080;
  --tile-border: #d8d0b0;
  --tile-border-free: #c8c0a0;
  --tile-face-border-inner: rgba(255, 255, 250, 0.88);
  --tile-face-highlight: rgba(255, 255, 255, 0.78);
  --tile-face-shadow: rgba(132, 114, 76, 0.16);
  --tile-face-sheen: rgba(255, 255, 255, 0.28);
  --tile-side-border: #9d9377;
  --tile-side-highlight: rgba(255, 255, 255, 0.22);
  --tile-text: #2c2416;

  /* Status bar */
  --status-bg: rgba(0, 0, 0, 0.06);
  --status-border: rgba(0, 0, 0, 0.08);

  /* Header */
  --header-bg: rgba(255, 255, 255, 0.85);
  --header-border: rgba(0, 0, 0, 0.08);

  /* Modals */
  --modal-overlay: rgba(0, 0, 0, 0.5);
  --modal-bg: #ffffff;
  --modal-border: rgba(0, 0, 0, 0.1);
  --modal-shadow: 0 24px 80px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0,0,0,0.05);

  /* Controls */
  --ctrl-bg: rgba(0, 0, 0, 0.05);
  --ctrl-bg-hover: rgba(0, 0, 0, 0.1);
  --ctrl-border: rgba(0, 0, 0, 0.12);

  /* Scrollbar */
  --scrollbar-thumb: rgba(0, 0, 0, 0.2);
  --scrollbar-track: transparent;
}

/* ── Background presets ── */
.bg-gradient1 { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important; }
.bg-gradient2 { background: linear-gradient(135deg, #0d2137 0%, #1b4332 100%) !important; }
.bg-gradient3 { background: linear-gradient(135deg, #2d1b69 0%, #11998e 100%) !important; }
.bg-gradient4 { background: linear-gradient(135deg, #3d0c11 0%, #1f1c18 100%) !important; }
.bg-custom    { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }

/* ── Tile face color families ── */
:root {
  --face-0: #e74c3c;
  --face-1: #e67e22;
  --face-2: #f1c40f;
  --face-3: #2ecc71;
  --face-4: #1abc9c;
  --face-5: #3498db;
  --face-6: #9b59b6;
  --face-7: #e91e63;
  --face-8: #ff5722;
  --face-9: #4caf50;
  --face-10: #009688;
  --face-11: #2196f3;
  --face-12: #673ab7;
  --face-13: #f44336;
  --face-14: #ff9800;
  --face-15: #ffeb3b;
  --face-16: #8bc34a;
  --face-17: #00bcd4;
  --face-18: #03a9f4;
  --face-19: #7c4dff;
  --face-20: #ff4081;
  --face-21: #ff6d00;
  --face-22: #c6ff00;
  --face-23: #69f0ae;
  --face-24: #40c4ff;
  --face-25: #e040fb;
  --face-26: #ff6e40;
  --face-27: #b9f6ca;
  --face-28: #80d8ff;
  --face-29: #ea80fc;
  --face-30: #ff9e80;
  --face-31: #ccff90;
  --face-32: #a7ffeb;
  --face-33: #84ffff;
  --face-34: #cfd8dc;
  --face-35: #ffd740;
}

/* ── Metal tile set: steel-grey shadows & borders ── */
.tiles-metal {
  --tile-shadow-1: #6a7880;
  --tile-shadow-2: #5a6870;
  --tile-shadow-3: #4a5860;
  --tile-border: #8a98a8;
  --tile-border-free: #9aaabb;
  --tile-face-border-inner: rgba(230, 241, 248, 0.52);
  --tile-face-highlight: rgba(244, 250, 255, 0.46);
  --tile-face-shadow: rgba(66, 84, 96, 0.28);
  --tile-face-sheen: rgba(255, 255, 255, 0.16);
  --tile-side-border: #3f4b54;
  --tile-side-highlight: rgba(220, 234, 242, 0.14);
}

/* ── Wood tile set: warm-brown shadows & borders ── */
.tiles-wood {
  --tile-shadow-1: #8a6038;
  --tile-shadow-2: #7a5028;
  --tile-shadow-3: #6a4018;
  --tile-border: #a07850;
  --tile-border-free: #b08860;
  --tile-face-border-inner: rgba(255, 240, 220, 0.34);
  --tile-face-highlight: rgba(255, 232, 204, 0.38);
  --tile-face-shadow: rgba(92, 52, 18, 0.3);
  --tile-face-sheen: rgba(255, 243, 227, 0.12);
  --tile-side-border: #59351a;
  --tile-side-highlight: rgba(255, 218, 180, 0.12);
}