/* ============================================================
   QUIMOCK BRAND THEME
   Personality: Friendly, energetic, encouraging, smart
   Colors: Vibrant blue + warm coral • Rounded • Playful depth
   ============================================================ */
:root {
  /* ─── Brand Colors — Deep navy (matches toolbar) ─── */
  --primary: #16213e;
  --primary-hover: #0f3460;
  --primary-soft: #e8edf5;
  --primary-glow: rgba(15, 52, 96, 0.2);

  --secondary: #f72585;
  --secondary-soft: #fef1f7;

  --accent: #0f3460;
  --accent-soft: #e3f2fd;

  /* ─── Backgrounds ─── */
  --bg: #fafbff;
  --bg-elev: #ffffff;
  --bg-soft: #f0f4ff;
  --surface: #e8eeff;

  /* ─── Text ─── */
  --text: #1a1a2e;
  --text-muted: #6c6c8a;

  /* ─── Borders ─── */
  --border: #e4e8f7;
  --border-hover: #c7cee8;

  /* ─── Status ─── */
  --success: #06d6a0;
  --success-soft: #ecfdf8;
  --danger: #ef476f;
  --danger-soft: #fef1f4;
  --warning: #ffd166;
  --warning-soft: #fffbeb;
  --info: #4361ee;

  /* ─── Shadows — warm and soft ─── */
  --shadow-sm: 0 2px 4px rgba(67, 97, 238, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow: 0 4px 12px rgba(67, 97, 238, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 28px rgba(67, 97, 238, 0.12), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 40px rgba(67, 97, 238, 0.14), 0 8px 16px rgba(0, 0, 0, 0.06);

  /* ─── Radius — very rounded, friendly ─── */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* ─── Gradients — dark metallic ─── */
  --grad: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  --grad-warm: linear-gradient(135deg, #f72585 0%, #ffd166 100%);
  --grad-fun: linear-gradient(135deg, #1a1a2e 0%, #0f3460 50%, #16213e 100%);
  --grad-subtle: linear-gradient(135deg, #e8edf5 0%, #f0f4ff 100%);

  /* ─── Font ─── */
  --font-scale: 1;
  --font-base: 16px;
  --transition: 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth: 200ms ease;
}

/* ════════════════════════════════════════════════════════════
   DARK MODE — Warm dark (not cold)
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg: #13131f;
  --bg-elev: #1e1e30;
  --bg-soft: #252540;
  --surface: #2e2e4a;

  --text: #f0f0ff;
  --text-muted: #a0a0c0;

  --border: #2e2e4a;
  --border-hover: #3d3d5c;

  --primary: #3d3d5c;
  --primary-hover: #4d4d6a;
  --primary-soft: #252540;
  --primary-glow: rgba(61, 61, 92, 0.4);
  --grad: linear-gradient(135deg, #252540 0%, #3d3d5c 50%, #2e2e4a 100%);

  --secondary: #ff4da6;
  --accent: #5ce1ff;

  --success: #34edb3;
  --success-soft: #0a2e23;
  --danger: #ff6b8a;
  --danger-soft: #2e0a14;
  --warning: #ffe066;
  --warning-soft: #2e2600;

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5);

  --grad-subtle: linear-gradient(135deg, #1e1e30 0%, #252540 100%);
}