/* ============================================================
   GETTIN' BETTER — DESIGN TOKENS (Light-first redesign)
   tokens.css
   ============================================================ */

:root {
  /* ── Page Backgrounds (Light-first) ────────────────────────── */
  --bg-page: #FDFBF7;
  /* Fondo principal vainilla       */
  --bg-card: #FFFFFF;
  /* Cards y paneles                 */
  --bg-section-alt: #F5EFE4;
  /* Secciones alternadas (cálido)  */

  /* ── Dark Accent Layers (Hero, Pricing, Footer) ────────────── */
  --bg-deep: #160715;
  /* Fondo oscuro para impacto       */
  --bg-medium: #220C21;
  /* Cards sobre dark                */
  --bg-light-dark: #341532;
  /* Bordes oscuros                  */

  /* ── Accent Damasco / Apricot ────────────────────────────── */
  --accent: #FF9A76;
  /* Damasco vibrante (focal)       */
  --accent-hover: #FFAF92;
  /* Hover iluminado                */
  --accent-deep: #E07A56;
  /* Damasco oscuro para headings   */
  --accent-glow: rgba(255, 154, 118, 0.30);
  --accent-soft: rgba(255, 154, 118, 0.08);
  --accent-soft-light: rgba(255, 154, 118, 0.12);
  --accent-border: rgba(255, 154, 118, 0.15);
  --accent-border-hover: rgba(255, 154, 118, 0.35);

  /* ── Mandarina (CTA, formulario) ─────────────────────────── */
  --mandarina: #E8511A;
  --mandarina-hover: #C93F0E;
  --mandarina-glow: rgba(232, 81, 26, 0.35);

  /* ── WhatsApp ─────────────────────────────────────────────── */
  --whatsapp: #3D2A3C;
  --whatsapp-hover: #220C21;
  --whatsapp-glow: rgba(22, 7, 21, 0.55);

  /* ── BancoEstado ─────────────────────────────────────────── */
  --bancoestado: #003087;

  /* ── Text — Light context (default) ────────────────────────── */
  --text-heading: #1A0A19;
  /* Headings sobre fondo claro     */
  --text-body: #3D2A3C;
  /* Texto principal sobre claro    */
  --text-muted-light: rgba(22, 7, 21, 0.55);
  /* Secundario claro  */

  /* ── Text — Dark context (.bg-dark) ────────────────────────── */
  --text-primary: #F7F3EB;
  /* Vainilla para lectura dark     */
  --text-muted: #C5ADC4;
  /* Gris-ciruela secundario        */
  --text-dark: #160715;
  /* Legacy compat                   */
  --text-dark-muted: rgba(22, 7, 21, 0.70);

  /* ── Borders — Light context ───────────────────────────────── */
  --border-light: 1px solid rgba(22, 7, 21, 0.08);
  --border-light-strong: 1px solid rgba(22, 7, 21, 0.14);

  /* ── Borders — Dark context ────────────────────────────────── */
  --border-glass: 1px solid rgba(255, 154, 118, 0.12);
  --border-glass-strong: 1px solid rgba(255, 154, 118, 0.25);
  --border-vainilla: 1px solid rgba(22, 7, 21, 0.08);

  /* ── Typography ──────────────────────────────────────────── */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;

  /* ── Transitions ─────────────────────────────────────────── */
  --transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Layout ──────────────────────────────────────────────── */
  --container-max: 1000px;
  --nav-height: 72px;

  /* ── Shadows — Light context ───────────────────────────────── */
  --shadow-light-sm: 0 2px 8px rgba(22, 7, 21, 0.04), 0 4px 16px rgba(22, 7, 21, 0.03);
  --shadow-light-md: 0 4px 12px rgba(22, 7, 21, 0.05), 0 8px 28px rgba(22, 7, 21, 0.04);
  --shadow-light-lg: 0 8px 24px rgba(22, 7, 21, 0.06), 0 16px 48px rgba(22, 7, 21, 0.05);
  --shadow-light-glow: 0 8px 24px rgba(255, 154, 118, 0.12);

  /* ── Shadows — Dark context ────────────────────────────────── */
  --shadow-sm: 0 8px 25px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 15px 35px rgba(0, 0, 0, 0.20);
  --shadow-lg: 0 25px 60px rgba(0, 0, 0, 0.30);
  --shadow-glow: 0 10px 30px var(--accent-glow);
  --shadow-glow-strong: 0 15px 35px rgba(255, 154, 118, 0.45);

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-nav: 1000;
  --z-float: 999;
}