/* ============================================================
   SHOWCASE THEMES — light + dark
   Format: [data-theme="<mode>"]
   ============================================================ */

:root,
[data-theme="light"],
[data-theme="dark"] {
  /* Neutral grays */
  --gray-50:  #f7f9fc;
  --gray-100: #eef2f7;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Brand gradient (purple → blue) — giống FLATPACK */
  --brand-1: #6366f1;
  --brand-2: #8b5cf6;
  --brand-3: #ec4899;
  --brand-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(236,72,153,0.08));

  /* Badge colors */
  --badge-new-bg: #ef4444;
  --badge-hot-bg: #f97316;
  --badge-popular-bg: #10b981;
  --badge-text: #ffffff;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.06);
  --shadow-md: 0 4px 12px rgba(15,23,42,0.06), 0 2px 4px rgba(15,23,42,0.04);
  --shadow-lg: 0 12px 32px rgba(15,23,42,0.10), 0 4px 12px rgba(15,23,42,0.06);
  --shadow-card-hover: 0 20px 48px rgba(99,102,241,0.18), 0 8px 16px rgba(15,23,42,0.08);

  /* Transitions */
  --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== LIGHT THEME (default) ===== */
:root,
[data-theme="light"] {
  --bg:           #ffffff;
  --bg-alt:       #f8fafc;
  --bg-elev:      #ffffff;
  --bg-hero:      linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #db2777 100%);
  --bg-hero-overlay: radial-gradient(ellipse at top, rgba(255,255,255,0.18), transparent 60%);

  --surface:      #ffffff;
  --surface-alt:  #f7f9fc;
  --border:       #e2e8f0;
  --border-strong: #cbd5e1;

  --text:         #0f172a;
  --text-soft:    #334155;
  --text-dim:     #64748b;
  --text-mute:    #94a3b8;
  --text-on-brand: #ffffff;

  --accent:       #6366f1;
  --accent-hover: #4f46e5;
  --accent-soft:  rgba(99,102,241,0.10);
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
  --bg:           #0b0d17;
  --bg-alt:       #11141f;
  --bg-elev:      #161a28;
  --bg-hero:      linear-gradient(135deg, #1e1b4b 0%, #4c1d95 50%, #831843 100%);
  --bg-hero-overlay: radial-gradient(ellipse at top, rgba(139,92,246,0.20), transparent 60%);

  --surface:      #161a28;
  --surface-alt:  #11141f;
  --border:       #252a3d;
  --border-strong: #353b54;

  --text:         #f1f5f9;
  --text-soft:    #cbd5e1;
  --text-dim:     #94a3b8;
  --text-mute:    #64748b;
  --text-on-brand: #ffffff;

  --accent:       #818cf8;
  --accent-hover: #a5b4fc;
  --accent-soft:  rgba(129,140,248,0.14);
}