/**
 * PearlCMS — Design tokens (dark / light)
 * Usar var(--pearl-*) en todo el front.
 */
:root,
html[data-theme="dark"] {
  --pearl-bg: #0b1220;
  --pearl-surface: #111827;
  --pearl-card: #1f2937;
  --pearl-border: rgba(255, 255, 255, 0.08);
  --pearl-text: #f8fafc;
  --pearl-muted: #94a3b8;
  --pearl-accent: #14b8a6;
  --pearl-accent-dark: #0d9488;
  --pearl-accent-soft: rgba(20, 184, 166, 0.12);
  --pearl-accent-text: #99f6e4;
  --pearl-header-bg: rgba(11, 18, 32, 0.82);
  --pearl-header-mobile-bg: rgba(11, 18, 32, 0.96);
  --pearl-nav-hover: rgba(255, 255, 255, 0.06);
  --pearl-btn-secondary-bg: rgba(255, 255, 255, 0.04);
  --pearl-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  --pearl-hero-glow: radial-gradient(circle at top right, rgba(20, 184, 166, 0.18), transparent 30%),
    radial-gradient(circle at 20% 20%, rgba(37, 99, 235, 0.16), transparent 28%);
  --pearl-btn-primary-text: #042f2e;
  --pearl-btn-primary-bg: linear-gradient(135deg, #5eead4, var(--pearl-accent));
  --pearl-stat-strong: #fff;
  --pearl-danger: #f87171;
  --pearl-warning: #fbbf24;
  --pearl-success: #34d399;
  --pearl-info: #60a5fa;
  --pearl-radius: 16px;
  --pearl-radius-sm: 12px;
  --pearl-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  --pearl-max: 1140px;

  --landing-bg: var(--pearl-bg);
  --landing-surface: var(--pearl-surface);
  --landing-card: var(--pearl-card);
  --landing-border: var(--pearl-border);
  --landing-text: var(--pearl-text);
  --landing-muted: var(--pearl-muted);
  --landing-accent: var(--pearl-accent);
  --landing-accent-dark: var(--pearl-accent-dark);
  --landing-accent-soft: var(--pearl-accent-soft);
  --landing-accent-text: var(--pearl-accent-text);
  --landing-header-bg: var(--pearl-header-bg);
  --landing-header-mobile-bg: var(--pearl-header-mobile-bg);
  --landing-nav-hover: var(--pearl-nav-hover);
  --landing-btn-secondary-bg: var(--pearl-btn-secondary-bg);
  --landing-panel-bg: var(--pearl-panel-bg);
  --landing-step-bg: rgba(255, 255, 255, 0.02);
  --landing-hero-glow: var(--pearl-hero-glow);
  --landing-btn-primary-text: var(--pearl-btn-primary-text);
  --landing-btn-primary-bg: var(--pearl-btn-primary-bg);
  --landing-stat-strong: var(--pearl-stat-strong);
  --landing-radius: var(--pearl-radius);
  --landing-shadow: var(--pearl-shadow);
  --landing-max: var(--pearl-max);
}

html[data-theme="light"] {
  --pearl-bg: #f4f7fb;
  --pearl-surface: #ffffff;
  --pearl-card: #ffffff;
  --pearl-border: rgba(15, 23, 42, 0.1);
  --pearl-text: #0f172a;
  --pearl-muted: #64748b;
  --pearl-accent: #0d9488;
  --pearl-accent-dark: #0f766e;
  --pearl-accent-soft: rgba(13, 148, 136, 0.12);
  --pearl-accent-text: #0f766e;
  --pearl-header-bg: rgba(244, 247, 251, 0.88);
  --pearl-header-mobile-bg: rgba(255, 255, 255, 0.98);
  --pearl-nav-hover: rgba(15, 23, 42, 0.05);
  --pearl-btn-secondary-bg: #ffffff;
  --pearl-panel-bg: linear-gradient(180deg, #ffffff, #f8fafc);
  --pearl-hero-glow: radial-gradient(circle at top right, rgba(13, 148, 136, 0.12), transparent 32%),
    radial-gradient(circle at 20% 20%, rgba(37, 99, 235, 0.08), transparent 28%);
  --pearl-btn-primary-text: #ffffff;
  --pearl-btn-primary-bg: linear-gradient(135deg, #14b8a6, #0d9488);
  --pearl-stat-strong: #0f172a;
  --pearl-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  --landing-step-bg: #f8fafc;
}

html {
  color-scheme: light dark;
  font-size: 16px;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}