:root {
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px; --r-full: 9999px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: .15s; --dur: .22s; --dur-slow: .35s;
}

html[data-theme="dark"], :root {
  --bg-page: #0a0b0f;
  --bg-card: #131519;
  --bg-elevated: #1a1c21;
  --bg-hover: #1f2229;
  --bg-input: #1a1c21;
  --bg-input-focus: #1f2229;

  --border-color: #23262d;
  --border-color-soft: #1a1c21;

  --text-primary: #e9eaec;
  --text-secondary: #9ba1ab;
  --text-muted: #6b7280;
  --text-inverse: #0a0b0f;

  /* ── Violeta Premium ── */
  --accent: #7c5cff;
  --accent-hover: #9370ff;
  --accent-soft: rgba(124, 92, 255, 0.12);

  /* ── Secundario (coral) ── */
  --secondary: #ff6ba8;
  --secondary-hover: #ff85b8;
  --secondary-soft: rgba(255, 107, 168, 0.12);

  /* ── Gradient principal (violeta → coral) ── */
  --gradient-brand: linear-gradient(135deg, #7c5cff 0%, #ff6ba8 100%);

  --gold: #fbbf24;
  --gold-soft: rgba(251, 191, 36, 0.12);

  --success: #22c55e;
  --success-soft: rgba(34, 197, 94, 0.12);
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.12);
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.12);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);

  /* ── Glow para CTAs principales ── */
  --glow-accent: 0 8px 24px rgba(124, 92, 255, 0.35);
  --glow-secondary: 0 8px 24px rgba(255, 107, 168, 0.25);
}

html[data-theme="light"] {
  --bg-page: #fafafa;
  --bg-card: #ffffff;
  --bg-elevated: #ffffff;
  --bg-hover: #f4f5f7;
  --bg-input: #f4f5f7;
  --bg-input-focus: #ffffff;

  --border-color: #e5e7eb;
  --border-color-soft: #f3f4f6;

  --text-primary: #0a0b0f;
  --text-secondary: #4b5563;
  --text-muted: #9ca3af;
  --text-inverse: #ffffff;

  /* ── Violeta Premium (light) ── */
  --accent: #6d4cff;
  --accent-hover: #5a3ce6;
  --accent-soft: rgba(109, 76, 255, 0.08);

  --secondary: #e94d8a;
  --secondary-hover: #d43a76;
  --secondary-soft: rgba(233, 77, 138, 0.08);

  --gradient-brand: linear-gradient(135deg, #6d4cff 0%, #e94d8a 100%);

  --gold: #b45309;
  --gold-soft: rgba(180, 83, 9, 0.08);

  --success: #16a34a;
  --success-soft: rgba(22, 163, 74, 0.08);
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.08);
  --warning: #d97706;
  --warning-soft: rgba(217, 119, 6, 0.08);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.15);

  --glow-accent: 0 8px 24px rgba(109, 76, 255, 0.2);
  --glow-secondary: 0 8px 24px rgba(233, 77, 138, 0.15);
}