/* ==========================================================================
   ALDÍA — Design Tokens
   "Menos desorden. Más plata."
   Arranca oscuro y cinematográfico → abre a un día claro, crema y fresco.
   ========================================================================== */

:root {
  /* ---- Marca · Verdes neón (pop, vibrantes) ---------------------------- */
  --green-pale:      #C6FF6A;   /* verde neón pálido */
  --green-neon:      #8FFF5A;   /* verde neón */
  --green-pop:       #5EE83B;   /* acento principal */
  --green-pop-mid:   #34E55C;   /* pop medio */
  --green-vivid:     #1FB851;   /* verde vivo para texto/acento sobre claro */
  --green-deep:      #0c7a3a;   /* verde profundo para contraste sobre claro */
  --glow:            rgba(94, 232, 59, .42);
  --glow-soft:       rgba(94, 232, 59, .18);

  /* Degradado de marca (la sílaba "día" del logo) */
  --grad-brand:      linear-gradient(105deg, #8FFF5A 0%, #5EE83B 45%, #34E55C 100%);
  --grad-brand-soft: linear-gradient(105deg, #C6FF6A 0%, #5EE83B 100%);

  /* ---- WhatsApp (acciones) -------------------------------------------- */
  --wa:        #25D366;
  --wa-dark:   #1aa850;
  --wa-ink:    #053d1a;

  /* ---- Tema OSCURO (intro cinemática) --------------------------------- */
  --d-bg:      #05080a;
  --d-bg-2:    #080d10;
  --d-surface: #0c1316;
  --d-surface-2:#111a1e;
  --d-line:    rgba(255, 255, 255, .09);
  --d-line-2:  rgba(255, 255, 255, .14);
  --d-text:    #eef5ef;
  --d-text-soft:#aebab1;
  --d-text-mut:#6f7d74;

  /* ---- Tema CLARO (contenido · día crema) ----------------------------- */
  --c-bg:      #f3f4ed;
  --c-bg-2:    #ecefe4;
  --c-bg-3:    #e6eadd;
  --c-surface: #ffffff;
  --c-text:    #16201a;
  --c-text-soft:#3a463e;
  --c-text-mut:#5d6a61;
  --c-text-faint:#88938a;
  --c-line:    rgba(24, 46, 30, .14);
  --c-line-2:  rgba(24, 46, 30, .22);

  /* ---- Tokens "vivos" (cambian según tema activo) --------------------- */
  --bg:        var(--d-bg);
  --surface:   var(--d-surface);
  --text:      var(--d-text);
  --text-soft: var(--d-text-soft);
  --text-mut:  var(--d-text-mut);
  --line:      var(--d-line);
  --accent:    var(--green-pop);
  --accent-ink:#06210e;

  /* ---- Tipografía ----------------------------------------------------- */
  --font-display: 'Clash Display', 'Satoshi', system-ui, sans-serif;
  --font-brand:   'Brier', 'Clash Display', sans-serif; /* Brier = comercial; fallback Clash */
  --font-body:    'Satoshi', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Escala fluida (clamp: móvil → desktop) */
  --fs-eyebrow: clamp(.72rem, .68rem + .2vw, .82rem);
  --fs-body:    clamp(1rem, .96rem + .3vw, 1.15rem);
  --fs-lead:    clamp(1.15rem, 1rem + .8vw, 1.5rem);
  --fs-h4:      clamp(1.2rem, 1.05rem + .8vw, 1.6rem);
  --fs-h3:      clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --fs-h2:      clamp(2.2rem, 1.6rem + 3vw, 4rem);
  --fs-h1:      clamp(2.8rem, 1.8rem + 5.4vw, 6.5rem);
  --fs-mega:    clamp(3.4rem, 1.6rem + 8.5vw, 9rem);

  --lh-tight:   1.02;
  --lh-snug:    1.12;
  --lh-body:    1.6;
  --tracking-tight: -0.03em;
  --tracking-tighter: -0.045em;
  --tracking-label: 0.18em;

  /* ---- Espaciado y layout -------------------------------------------- */
  --maxw:        1240px;
  --maxw-narrow: 820px;
  --gutter:      clamp(1.25rem, .8rem + 2.2vw, 3rem);
  --section-y:   clamp(4.5rem, 3rem + 7vw, 9rem);

  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;    --space-8: 4rem;    --space-9: 6rem;

  /* ---- Radios --------------------------------------------------------- */
  --r-xs: .5rem;  --r-sm: .75rem; --r-md: 1rem;
  --r-lg: 1.5rem; --r-xl: 2rem;   --r-2xl: 2.75rem;
  --r-pill: 999px;

  /* ---- Sombras -------------------------------------------------------- */
  --shadow-sm:  0 2px 8px rgba(11, 20, 14, .06);
  --shadow-md:  0 12px 30px -10px rgba(11, 20, 14, .14);
  --shadow-lg:  0 30px 60px -22px rgba(11, 20, 14, .26);
  --shadow-pop: 0 14px 40px -10px var(--glow);
  --shadow-wa:  0 14px 36px -10px rgba(37, 211, 102, .45);

  /* ---- Motion --------------------------------------------------------- */
  --ease-out:   cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-spring:cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast:   .25s;
  --dur:        .5s;
  --dur-slow:   .9s;

  /* ---- Z-layers ------------------------------------------------------- */
  --z-bg: 0; --z-content: 10; --z-nav: 100; --z-overlay: 1000; --z-cursor: 2000;
}

/* Tema claro aplicado por secciones / a partir de la transición.
   IMPORTANTE: cada sección re-aplica `color: var(--text)` para que el texto
   se recalcule con el --text del tema local (si no, hereda el color del body). */
.theme-light {
  --bg:        var(--c-bg);
  --surface:   var(--c-surface);
  --text:      var(--c-text);
  --text-soft: var(--c-text-soft);
  --text-mut:  var(--c-text-mut);
  --text-faint:var(--c-text-faint);
  --line:      var(--c-line);
  --accent:    var(--green-deep);   /* texto sobre claro → AA (4.9:1). Verde vivo solo decorativo */
  --accent-ink:#06210e;
  color: var(--text);
}

.theme-dark {
  --bg:        var(--d-bg);
  --surface:   var(--d-surface);
  --text:      var(--d-text);
  --text-soft: var(--d-text-soft);
  --text-mut:  var(--d-text-mut);
  --line:      var(--d-line);
  --accent:    var(--green-pop);
  color: var(--text);
}