/* =========================================================
   Respira Mejor — Design Tokens
   Paleta: azul claro (sea/sky) + verde (leaf/pine)
   Referencia: módulo 07 + Apéndice B del playbook médico.
   ========================================================= */

:root {
  /* === Anchors azules (de profundo a claro) === */
  --ocean-deep:   #03045e;  /* navy más profundo, casi tinta */
  --ocean:        #023e8a;  /* navy/sea profundo */
  --sea:          #0077b6;  /* azul medio para botones primarios */
  --bay:          #0096c7;  /* azul-cyan medio */
  --sky:          #00b4d8;  /* azul claro brillante (acento ojos) */
  --aqua:         #48cae4;  /* azul-cyan claro */
  --mist:         #90e0ef;  /* azul muy claro */
  --foam:         #caf0f8;  /* azul lavado */

  /* === Verdes respiratorios === */
  --leaf-deep:    #03825e;  /* verde profundo, contraste blanco */
  --leaf:         #06a77d;  /* verde vivo principal */
  --pine:         #2a9d8f;  /* verde-teal, acento secundario */
  --sage:         #52b788;  /* verde claro */
  --moss:         #95d5b2;  /* verde muy claro */
  --mint:         #d8f3dc;  /* mint pastel */

  /* === Neutros === */
  --paper:        #ffffff;
  --cloud:        #f0fbfc;  /* fondo claro azul muy lavado */
  --cloud-alt:    #e0f4f7;
  --ink:          #0a2540;  /* texto principal */
  --ink-muted:    #5a708a;  /* texto secundario (≥4.5:1 sobre paper) */
  --border:       rgba(2,62,138,.10);
  --border-strong:rgba(2,62,138,.18);

  /* === Editoriales (rediseño v3) === */
  --cream:        #fbf9f3;  /* fondo editorial cálido */
  --paper-warm:   #f7f4ec;  /* fondo de secciones tipo revista */
  --line-soft:    #e6e3d8;  /* hairline editorial */
  --muted:        var(--ink-muted);

  /* === Acentos semánticos (reescritibles por página) === */
  --accent:       var(--sea);
  --accent-soft:  var(--mist);
  --accent-2:     var(--leaf);
  --accent-2-soft:var(--moss);
  --warn:         #d62828;
  --warn-soft:    #ffe0e0;

  /* === Tipografía === */
  --font-sans:    "Plus Jakarta Sans", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-serif:   "Fraunces", Georgia, "Times New Roman", serif;

  /* === Escala fluida (clamp) === */
  --fs-xs:   clamp(.75rem, .73rem + .1vw, .8rem);
  --fs-sm:   clamp(.85rem, .82rem + .15vw, .92rem);
  --fs-base: 1rem;
  --fs-md:   clamp(1.05rem, 1rem + .25vw, 1.15rem);
  --fs-lg:   clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
  --fs-xl:   clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --fs-2xl:  clamp(2rem, 1.6rem + 2vw, 2.8rem);
  --fs-3xl:  clamp(2.4rem, 1.9rem + 2.8vw, 3.6rem);
  --fs-hero: clamp(2.4rem, 6.5vw, 4.4rem);

  /* === Espaciado escala 4px === */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 80px;  --sp-10: 96px; --sp-11: 128px;

  /* === Radius === */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-pill: 100px;

  /* === Sombras (en azul-tinte) === */
  --shadow-xs:   0 1px 6px  rgba(2,62,138,.05);
  --shadow-sm:   0 2px 14px rgba(2,62,138,.07);
  --shadow-md:   0 6px 32px rgba(2,62,138,.09);
  --shadow-lg:   0 16px 60px rgba(2,62,138,.12);
  --shadow-xl:   0 24px 80px rgba(2,62,138,.18);
  --shadow-sky:  0 8px 32px rgba(0,180,216,.28);
  --shadow-leaf: 0 8px 32px rgba(6,167,125,.26);

  /* === Easing === */
  --ease:        cubic-bezier(.16, 1, .3, 1);
  --ease-in:     cubic-bezier(.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* === Z-index === */
  --z-toast:    60;
  --z-fab:      50;
  --z-nav:      40;
  --z-overlay:  30;
  --z-dropdown: 20;
}

/* Override por página/sección */
.theme-asma   { --accent: var(--leaf); --accent-soft: var(--mint); }
.theme-epoc   { --accent: #ff6b35;     --accent-soft: #fde4d8; }
.theme-sueno  { --accent: var(--ocean);--accent-soft: var(--foam); }