/* ============================================================
   tokens.css · Sistema de diseño Fomenta Fisioterapia
   Extraído del CSS Elementor original (post-7.css + global.css)
   y del SVG del logo. Brand = petrol/teal (NO azul).
   ============================================================ */

:root {
  /* ---------- Paleta marca ---------- */
  --color-brand:           #0E6B70;   /* Petrol principal (logo top, footer, CTAs) */
  --color-brand-dark:      #0B5559;   /* Petrol oscuro (logo bottom, hover) */
  --color-brand-darker:    #094548;   /* Active states */
  --color-brand-tint:      #e6f1f7;   /* Fondo suave secciones */

  /* ---------- Ink / Slate scale ---------- */
  --color-ink:             #0F172A;   /* Texto principal */
  --color-ink-2:           #1E293B;   /* Texto secundario fuerte */
  --color-ink-3:           #475569;   /* Texto secundario */
  --color-ink-4:           #64748B;   /* Texto terciario / labels */
  --color-ink-5:           #94A3B8;   /* Texto muted */
  --color-border:          #CBD5E1;   /* Bordes fuertes */
  --color-border-soft:     #E2E8F0;   /* Bordes suaves / divisores */
  --color-surface-2:       #F1F5F9;   /* Fondo card alterno */
  --color-surface-1:       #F8FAFC;   /* Fondo card */
  --color-bg:              #F9FAFA;   /* Fondo página (warm off-white, no blanco puro) */
  --color-white:           #FFFFFF;   /* Blanco puro · uso puntual */

  /* ---------- Gradients ---------- */
  --gradient-brand:        linear-gradient(101deg, #0E6B70 0%, #0B5559 100%);
  --gradient-brand-v:      linear-gradient(180deg, #0E6B70 0%, #0B5559 100%);

  /* ---------- Tipografía ---------- */
  --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;

  /* Escala (clamps fluidos · mobile-first) */
  --fs-hero:      clamp(2.5rem, 12vw, 6.5rem);     /* mobile 44-45px / desktop 104px */
  --fs-h1:        clamp(2.25rem, 4vw + 1rem, 3.75rem);  /* Section titles */
  --fs-h2:        clamp(1.75rem, 2.5vw + 1rem, 2.5rem); /* Subsection */
  --fs-h3:        clamp(1.25rem, 1.2vw + 0.9rem, 1.5rem);
  --fs-body-lg:   1.125rem;   /* 18px */
  --fs-body:      1rem;       /* 16px */
  --fs-small:     0.875rem;   /* 14px */
  --fs-eyebrow:   0.75rem;    /* 12px · Space Mono uppercase */

  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-normal:    1.5;
  --lh-relaxed:   1.65;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.15em;   /* Para eyebrows Space Mono */

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ---------- Layout (fullwidth · sin cap, solo edge padding) ---------- */
  --container-max:     100%;
  --container-narrow:  1100px;                       /* solo para textos largos legales */
  --container-pad:     clamp(1.25rem, 7.3vw, 7rem);   /* mobile 20px / desktop 104px */

  --section-py:        clamp(4rem, 8vw, 7rem);   /* Vertical padding secciones */
  --section-gap:       clamp(2rem, 4vw, 4rem);

  /* ---------- Bordes & radio ---------- */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  --border-thin: 1px solid var(--color-border-soft);

  /* ---------- Sombras ---------- */
  --shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow:     0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg:  0 12px 32px rgba(15, 23, 42, 0.08);

  /* ---------- Transiciones ---------- */
  --transition-fast:  120ms ease;
  --transition:       200ms ease;
  --transition-slow:  320ms ease;

  /* ---------- Header ---------- */
  --header-height: 80px;                        /* matchea original */
  --header-pad:    clamp(1.25rem, 3.3vw, 3rem); /* 20px mobile / 48px @ 1440 */
}

/* Selección de texto */
::selection {
  background: var(--color-brand);
  color: #fff;
}