/* ==========================================================================
   Universal Fun App Engine - Themes & Custom Properties
   ========================================================================== */

/* Default Theme: Modern Indigo & Purple */
:root, [data-theme="default"] {
  --color-primary: #4f46e5;
  --color-primary-hover: #4338ca;
  --color-secondary: #ec4899;
  --color-secondary-hover: #db2777;
  --color-background: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-hover: #f1f5f9;
  --color-text-main: #0f172a;
  --color-text-muted: #64748b;
  --color-border: #e2e8f0;
  --color-focus: #6366f1;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;

  --radius-sm: 8px;
  --radius-card: 16px;
  --radius-button: 12px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-card: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06);

  --font-heading: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Dark Theme */
[data-theme="dark"] {
  --color-primary: #6366f1;
  --color-primary-hover: #4f46e5;
  --color-secondary: #f472b6;
  --color-secondary-hover: #ec4899;
  --color-background: #0f172a;
  --color-surface: #1e293b;
  --color-surface-hover: #334155;
  --color-text-main: #f8fafc;
  --color-text-muted: #94a3b8;
  --color-border: #334155;
  --color-focus: #818cf8;

  --shadow-card: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
}

/* Colorful Theme: Playful Candy Palette */
[data-theme="colorful"] {
  --color-primary: #8b5cf6;
  --color-primary-hover: #7c3aed;
  --color-secondary: #f43f5e;
  --color-secondary-hover: #e11d48;
  --color-background: #fff7ed;
  --color-surface: #ffffff;
  --color-surface-hover: #ffedd5;
  --color-text-main: #1c1917;
  --color-text-muted: #78716c;
  --color-border: #fed7aa;
  --color-focus: #a855f7;

  --radius-card: 24px;
  --radius-button: 16px;
  --shadow-card: 0 12px 30px -5px rgba(139, 92, 246, 0.15);
}

/* Retro Theme: Arcade Aesthetic */
[data-theme="retro"] {
  --color-primary: #059669;
  --color-primary-hover: #047857;
  --color-secondary: #d97706;
  --color-secondary-hover: #b45309;
  --color-background: #fef3c7;
  --color-surface: #fffbeb;
  --color-surface-hover: #fde68a;
  --color-text-main: #451a03;
  --color-text-muted: #78350f;
  --color-border: #fcd34d;
  --color-focus: #10b981;

  --radius-card: 4px;
  --radius-button: 4px;
  --shadow-card: 4px 4px 0px 0px #451a03;
  --shadow-hover: 6px 6px 0px 0px #451a03;
}

/* Minimal Theme: Clean Monochrome */
[data-theme="minimal"] {
  --color-primary: #18181b;
  --color-primary-hover: #27272a;
  --color-secondary: #52525b;
  --color-secondary-hover: #3f3f46;
  --color-background: #fafafa;
  --color-surface: #ffffff;
  --color-surface-hover: #f4f4f5;
  --color-text-main: #09090b;
  --color-text-muted: #71717a;
  --color-border: #e4e4e7;
  --color-focus: #18181b;

  --radius-card: 8px;
  --radius-button: 6px;
  --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}