/* ============================================================
   tokens.css — Capa de marca por cliente (white-label)
   Instancia: Move Studio by Sí Pilates
   Para replicar en otro estudio: editar SOLO este archivo
   y config.js. No tocar index.html.
   ============================================================ */

:root {
  /* ---- Color de marca (extraído del logotipo) ---- */
  --brand:        #14A5A5;   /* teal principal */
  --brand-deep:   #0C7A7A;   /* teal oscuro: hover, texto sobre claro */
  --brand-soft:   #E0F2F1;   /* teal 8%: fondos de chips y badges */
  --ink:          #45484D;   /* gris del logotipo: titulares */
  --ink-soft:     #6B6F76;   /* texto secundario */

  /* ---- Neutros del espacio físico (foto del estudio) ---- */
  --paper:        #F8F5EF;   /* fondo general, blanco cálido */
  --sand:         #EDE5D8;   /* estuco: fondos alternos de sección */
  --line:         #E2DACB;   /* bordes y divisores */
  --glow:         #D9A65A;   /* luz dorada de los arcos: solo halos */

  /* ---- Tipografía ---- */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Instrument Sans', system-ui, sans-serif;
  --font-script:  'Caveat', cursive;   /* eco de la caligrafía del logo */

  /* ---- Escala tipográfica ---- */
  --text-hero:    clamp(2.6rem, 6vw, 4.4rem);
  --text-h2:      clamp(1.9rem, 3.5vw, 2.6rem);
  --text-h3:      1.25rem;
  --text-body:    1.0625rem;
  --text-small:   0.875rem;
  --text-script:  clamp(1.5rem, 2.5vw, 1.9rem);

  /* ---- Geometría ---- */
  --radius-card:  18px;
  --radius-btn:   999px;
  --arch:         46% 46% 0 0 / 32% 32% 0 0;  /* arco firma del estudio */
  --shadow-card:  0 6px 24px rgba(69, 72, 77, 0.08);
  --shadow-glow:  0 0 60px 6px rgba(217, 166, 90, 0.35);

  /* ---- Ritmo vertical ---- */
  --section-pad:  clamp(4rem, 9vw, 7rem);
  --container:    1160px;
}