/* ==========================================================================
   KIDQUEST LOGIC TREE - THEME ENGINES
   3 Switchable Immersive Worlds for Kids (Ages 5-10)
   ========================================================================== */

/* --------------------------------------------------------------------------
   THEME 1: ADVENTURE QUEST (Island Map / Treasure Trail)
   -------------------------------------------------------------------------- */
[data-theme="adventure"] {
  --bg-app: #0f1c18;
  --bg-surface: #172a23;
  --bg-surface-elevated: #203930;
  --bg-glass: rgba(23, 42, 35, 0.88);
  --bg-canvas: #0a1310;
  --canvas-grid-color: rgba(245, 158, 11, 0.12);
  --canvas-pattern: radial-gradient(circle, rgba(245, 158, 11, 0.22) 1.5px, transparent 1.5px);

  --border-subtle: rgba(245, 158, 11, 0.2);
  --border-accent: #f59e0b;
  --border-glow: rgba(245, 158, 11, 0.4);

  --text-primary: #fef3c7;
  --text-secondary: #d1d5db;
  --text-muted: #9ca3af;

  --accent-main: #f59e0b;     /* Treasure Gold */
  --accent-secondary: #10b981;/* Jungle Emerald */
  --accent-danger: #ef4444;   /* Danger Lava */
  --accent-special: #8b5cf6;  /* Ancient Relic Violet */

  --wire-default: #f59e0b;
  --wire-pulse: #fbbf24;
  --wire-yes: #10b981;
  --wire-no: #f87171;

  --badge-bg: rgba(245, 158, 11, 0.15);
  --badge-border: #f59e0b;
  --badge-text: #fef3c7;

  /* Synchronize with Shoelace dark theme variables */
  --sl-color-primary-500: #f59e0b;
  --sl-color-primary-600: #d97706;
  --sl-input-background-color: #172a23;
  --sl-input-border-color: rgba(245, 158, 11, 0.3);
  --sl-panel-background-color: #172a23;
  --sl-panel-border-color: rgba(245, 158, 11, 0.25);
}

/* --------------------------------------------------------------------------
   THEME 2: COSMIC EXPLORER (Space Station / Rocket Mission)
   -------------------------------------------------------------------------- */
[data-theme="cosmic"] {
  --bg-app: #080a14;
  --bg-surface: #101426;
  --bg-surface-elevated: #1a203d;
  --bg-glass: rgba(16, 20, 38, 0.88);
  --bg-canvas: #05060c;
  --canvas-grid-color: rgba(56, 189, 248, 0.15);
  --canvas-pattern: radial-gradient(circle, rgba(56, 189, 248, 0.25) 1.5px, transparent 1.5px);

  --border-subtle: rgba(56, 189, 248, 0.2);
  --border-accent: #38bdf8;
  --border-glow: rgba(56, 189, 248, 0.45);

  --text-primary: #f0f9ff;
  --text-secondary: #bae6fd;
  --text-muted: #7dd3fc;

  --accent-main: #38bdf8;     /* Laser Cyan */
  --accent-secondary: #c084fc;/* Nebula Purple */
  --accent-danger: #f43f5e;   /* Solar Flare Pink */
  --accent-special: #34d399;  /* Alien Biosphere Green */

  --wire-default: #38bdf8;
  --wire-pulse: #7dd3fc;
  --wire-yes: #34d399;
  --wire-no: #f43f5e;

  --badge-bg: rgba(56, 189, 248, 0.15);
  --badge-border: #38bdf8;
  --badge-text: #e0f2fe;

  --sl-color-primary-500: #38bdf8;
  --sl-color-primary-600: #0284c7;
  --sl-input-background-color: #101426;
  --sl-input-border-color: rgba(56, 189, 248, 0.35);
  --sl-panel-background-color: #101426;
  --sl-panel-border-color: rgba(56, 189, 248, 0.25);
}

/* --------------------------------------------------------------------------
   THEME 3: MAGIC TOYBOX (Snap-Brick / Tactile Playground)
   -------------------------------------------------------------------------- */
[data-theme="toybox"] {
  --bg-app: #151922;
  --bg-surface: #212738;
  --bg-surface-elevated: #2d354d;
  --bg-glass: rgba(33, 39, 56, 0.92);
  --bg-canvas: #10141d;
  --canvas-grid-color: rgba(255, 255, 255, 0.08);
  --canvas-pattern: radial-gradient(circle, rgba(234, 179, 8, 0.22) 2px, transparent 2px);

  --border-subtle: rgba(255, 255, 255, 0.15);
  --border-accent: #3b82f6;
  --border-glow: rgba(59, 130, 246, 0.4);

  --text-primary: #ffffff;
  --text-secondary: #e2e8f0;
  --text-muted: #94a3b8;

  --accent-main: #eab308;     /* Toy Lemon */
  --accent-secondary: #ec4899;/* Candy Pink */
  --accent-danger: #ef4444;   /* Lego Red */
  --accent-special: #10b981;  /* Slime Green */

  --wire-default: #eab308;
  --wire-pulse: #fde047;
  --wire-yes: #10b981;
  --wire-no: #ef4444;

  --badge-bg: rgba(234, 179, 8, 0.18);
  --badge-border: #eab308;
  --badge-text: #fef08a;

  --sl-color-primary-500: #3b82f6;
  --sl-color-primary-600: #2563eb;
  --sl-input-background-color: #212738;
  --sl-input-border-color: rgba(255, 255, 255, 0.25);
  --sl-panel-background-color: #212738;
  --sl-panel-border-color: rgba(255, 255, 255, 0.18);
}