/* ============================================
   Magi-Labs — Design Tokens
   Shared CSS custom properties for all pages.
   Primary accent: Anthropic Orange (#D77757)
   ============================================ */

:root {
  /* Backgrounds */
  --bg-dark: #0a0e17;
  --bg-card: #111827;
  --bg-card-hover: #1a2332;
  --bg-surface: #0f1520;
  --overlay-bg: rgba(10, 14, 23, 0.84);

  /* Borders */
  --border: #1e293b;
  --border-glow: #D77757;

  /* Text */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #475569;

  /* Accent colors */
  --accent-primary: #D77757;
  --accent-blue: #3b82f6;
  --accent-purple: #8b5cf6;
  --accent-cyan: #06b6d4;
  --accent-green: #10b981;
  --accent-amber: #f59e0b;
  --accent-warm: #D77757;
  --accent-red: #ef4444;
  --accent-pink: #ec4899;

  /* Gradients — Anthropic orange as primary */
  --gradient-main: linear-gradient(135deg, #D77757, #C15F3C);
  --gradient-green: linear-gradient(135deg, #10b981, #059669);
  --gradient-warm: linear-gradient(135deg, #D77757, #C15F3C);
  --gradient-gold: linear-gradient(135deg, #f59e0b, #ef4444);

  /* Shadows */
  --shadow-glow: 0 0 20px rgba(215, 119, 87, 0.15);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);

  /* Radii */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;

  /* Transitions */
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Light Theme (Pampas palette) ── */
[data-theme="light"] {
  --bg-dark: #F4F3EE;
  --bg-card: #ffffff;
  --bg-card-hover: #f5f4ef;
  --bg-surface: #eeede7;
  --overlay-bg: rgba(244, 243, 238, 0.92);

  --border: #ddd9d0;
  --border-glow: #C15F3C;

  --text-primary: #2a2a2a;
  --text-secondary: #666;
  --text-muted: #999;

  --accent-primary: #C15F3C;
  --accent-blue: #2563eb;
  --accent-purple: #7c3aed;
  --accent-cyan: #0891b2;
  --accent-green: #059669;
  --accent-amber: #d97706;
  --accent-warm: #C15F3C;
  --accent-red: #dc2626;
  --accent-pink: #db2777;

  --gradient-main: linear-gradient(135deg, #D77757, #C15F3C);
  --gradient-green: linear-gradient(135deg, #059669, #047857);
  --gradient-warm: linear-gradient(135deg, #D77757, #C15F3C);
  --gradient-gold: linear-gradient(135deg, #d97706, #dc2626);

  --shadow-glow: 0 0 20px rgba(193, 95, 60, 0.12);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
}