/* ============================================================
   DINERIO — DESIGN TOKENS · ÚNICA FUENTE DE VERDAD
   Marca esmeralda · Space Grotesk (display) + Inter (cuerpo)
   Modo claro y oscuro. Los nombres antiguos (--ink, --green,
   --cream, --white, --slate, --muted) se mantienen como ALIAS
   vía var(), así que se reresuelven solos al cambiar de tema.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- Acento / marca (lima #71E326) ---- */
  --accent:        #36790c;   /* lima oscurecido p/ claro: 5.4:1 sobre blanco (AA) */
  --accent-strong: #36790c;   /* = --accent (el lima puro #71e326 da 1.7:1 sobre blanco) */
  --accent-hover:  #2b6109;   /* hover de botones */
  --accent-soft:   rgba(113, 227, 38, 0.14);
  --accent-tint:   #f1fce9;
  --on-accent:     #ffffff;

  /* ---- Texto ---- */
  --text:           #1a1a1a;
  --text-secondary: #475569;
  --text-muted:     #64748b;   /* subido desde #94a3b8 para cumplir AA sobre fondo claro */

  /* ---- Superficies ---- */
  --bg:           #f9f9f7;
  --bg-alt:       #f0f2f5;
  --card:         #ffffff;
  --border:       #e9ecef;
  --border-light: #f1f5f9;

  /* ---- Superficies oscuras fijas (no invierten): banda de features + footer ---- */
  --surface-dark:   #161616;
  --on-dark:        #f5f5f5;
  --on-dark-soft:   rgba(255, 255, 255, 0.62);
  --on-dark-border: rgba(255, 255, 255, 0.08);

  /* ---- Semánticos ---- */
  --positive: #36790c;
  --negative: #dc2626;
  --amber:    #a16207;   /* estrellas: 5.1:1 sobre tarjeta blanca (AA) */

  /* ---- Cristal · tarjeta estándar ---- */
  --glass-bg:     rgba(255, 255, 255, 0.52);
  --glass-border: rgba(255, 255, 255, 0.70);
  --glass-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  --glass-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.90);
  /* Cristal · hero (tinte lima) */
  --glass-hero-bg:     rgba(113, 227, 38, 0.12);
  --glass-hero-border: rgba(113, 227, 38, 0.30);
  --glass-hero-shadow: 0 8px 32px rgba(113, 227, 38, 0.16);
  /* Cristal · nav / píldora flotante */
  --glass-nav-bg: rgba(255, 255, 255, 0.72);

  /* ---- Halos de acento (blobs difuminados + glow bajo CTAs) ---- */
  --blob-accent:   rgba(113, 227, 38, 0.24);
  --blob-accent-2: rgba(113, 227, 38, 0.14);
  --glow-accent:   rgba(54, 121, 12, 0.30);
  /* Halo destellado tras las capturas ("Cómo funciona") */
  --halo-shot:   rgba(113, 227, 38, 0.38);
  --halo-shot-2: rgba(113, 227, 38, 0.16);

  /* ---- Radios ---- */
  --radius-section: 24px;
  --radius-card:    18px;
  --radius-item:    16px;
  --radius-button:  11px;
  --radius-icon:    10px;
  --radius-pill:    999px;
  /* alias de los radios usados hoy por la home */
  --radius-sm: 11px;
  --radius-md: 16px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  /* ---- Sombras (dependientes del modo) ---- */
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-card:  0 4px 24px rgba(0, 0, 0, 0.07);
  --shadow-float: 0 24px 80px rgba(0, 0, 0, 0.14), 0 4px 16px rgba(0, 0, 0, 0.06);

  /* ---- Tipografía ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* ---- Movimiento ---- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur: 0.7s;

  /* ---- ALIAS de compatibilidad (nombres antiguos → nuevos) ---- */
  /* Home */
  --ink:         var(--text);
  --green:       var(--accent);
  --green-dim:   var(--accent-soft);
  --green-light: var(--accent-tint);
  --cream:       var(--bg);
  --cream-alt:   var(--bg-alt);
  --white:       var(--card);
  --slate:       var(--text-secondary);
  --muted:       var(--text-muted);
  /* Blog / styles.css */
  --brand:       var(--accent-strong);
  --brand-light: var(--accent-hover);
  --surface:     var(--bg);
  --surface-alt: var(--bg-alt);
}

/* ============================================================
   TEMA OSCURO
   Solo se redefinen los tokens CANÓNICOS; los alias usan var()
   y se reresuelven automáticamente. El script anti-FOUC de la
   home fija data-theme (light|dark) antes de pintar — resolviendo
   prefers-color-scheme cuando no hay preferencia guardada — así
   que basta con el selector [data-theme="dark"].
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --accent:        #71e326;   /* lima EXACTO de marca: 11.6:1 sobre fondo (AA) */
  --accent-strong: #71e326;
  --accent-hover:  #84ef41;
  --accent-soft:   rgba(113, 227, 38, 0.14);
  --accent-tint:   rgba(113, 227, 38, 0.16);
  --on-accent:     #112605;   /* texto sobre acento: 9.7:1 (AA) */

  --text:           #f5f5f5;
  --text-secondary: #cbd5e1;
  --text-muted:     #94a3b8;

  --bg:           #0f0f0f;
  --bg-alt:       #1a1a1a;
  --card:         #1e1e1e;
  --border:       #2a2a2a;
  --border-light: #2a2a2a;

  --surface-dark:   #0c0c0c;
  --on-dark:        #f5f5f5;
  --on-dark-soft:   rgba(255, 255, 255, 0.62);
  --on-dark-border: rgba(255, 255, 255, 0.08);

  --positive: #71e326;
  --negative: #f87171;
  --amber:    #d97706;   /* en oscuro cumple sobre tarjeta #1e1e1e (5.23:1) */

  --glass-bg:     rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
  --glass-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --glass-hero-bg:     rgba(113, 227, 38, 0.10);
  --glass-hero-border: rgba(113, 227, 38, 0.20);
  --glass-hero-shadow: 0 8px 32px rgba(0, 0, 0, 0.30);
  --glass-nav-bg: rgba(20, 20, 18, 0.82);

  --blob-accent:   rgba(113, 227, 38, 0.14);
  --blob-accent-2: rgba(113, 227, 38, 0.10);
  --glow-accent:   rgba(113, 227, 38, 0.22);
  /* Halo de capturas: en oscuro el lima brilla más, baja la alpha */
  --halo-shot:   rgba(113, 227, 38, 0.22);
  --halo-shot-2: rgba(113, 227, 38, 0.10);

  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.40);
  --shadow-card:  0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-float: 0 24px 80px rgba(0, 0, 0, 0.60), 0 4px 16px rgba(0, 0, 0, 0.40);
}