/* Ana Paula Cabaleiro, tokens. Nadie escribe un color, un tamaño, una duración ni un radio literal fuera de este archivo. */

:root {
  /* ---------- Color ---------- */
  --papel: #fffdfc;            /* fondo base */
  --lavado-rosa: #fdf1ec;      /* un solo campo suave: Sobre mí */
  --salmon: #f8b2a3;           /* pétalos de la tarjeta. Campo y gráfico, nunca texto */
  --salmon-hondo: #ee8c7a;     /* hoja interior del pétalo, trazos finos */
  --verde-tarjeta: #219690;    /* sépalos del mandala. Gráfico y texto grande (3.5:1 sobre papel) */
  --verde-hondo: #0e5854;      /* acción principal, titulares, banda de la frase, pie */
  --verde-hondo-2: #0a423f;    /* hover y pulsado del botón */
  --tinta: #14302d;            /* texto principal, 15:1 sobre papel */
  --tinta-suave: #4a625e;      /* texto secundario, 6:1 sobre papel y lavado. No va sobre salmón */
  --granada: #8f2f4b;          /* único texto rosado permitido, 7.7:1 sobre papel */
  --aviso: #e9f2f0;            /* campo de urgencias: el único verde pálido de la página */
  --aviso-regla: #9fc4bf;      /* filetes de 1 px entre líneas de teléfono (decorativo) */
  --encaje: #f6d5cc;           /* mandalas de fondo (la trama pálida de la tarjeta) */
  --regla: #e8d3cc;            /* filetes de 1px sobre papel */
  --regla-verde: #bfdedb;      /* filetes sobre campos verdes claros */

  /* ---------- Tipografía ---------- */
  --f-texto: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-nombre: "Pinyon Script", "Great Vibes", cursive; /* SOLO nombre y firma. Subset con text= */

  /* Escala: tamaños reales a 390 y a 1440 entre paréntesis (ver DISENO.md sección 6) */
  --escala--2: 0.8125rem;                                  /* 13px: legales, pie de foto */
  --escala--1: 0.9375rem;                                  /* 15px: enlaces secundarios */
  --escala-0: 1.125rem;                                    /* 18px: texto corrido */
  --escala-1: 1.375rem;                                    /* 22px: bajada, pregunta del FAQ */
  --escala-2: 1.75rem;                                     /* 28px: subtítulos, pasos, frases de lista */
  --escala-3: clamp(2.125rem, 1.3rem + 2.6vw, 3.5rem);     /* 34 a 56px: h2 y frase del hero */
  --escala-4: clamp(2.25rem, 1rem + 4.4vw, 4.75rem);       /* 36 a 76px: frase destacada, números de pasos */
  --escala-5: clamp(2.5rem, 1rem + 6vw, 5.5rem);           /* 40 a 88px: la frase de la banda y el cierre */
  --escala-numero: clamp(2rem, 1.2rem + 2vw, 3rem);       /* 32 a 48px: números de teléfono */
  --escala-nombre: clamp(3.5rem, 1.5rem + 8vw, 7rem);      /* 56 a 112px: nombre en manuscrita */

  --lh-display: 1.04;
  --lh-titulo: 1.12;
  --lh-texto: 1.6;
  --lh-nombre: 0.9;
  --tracking-display: -0.015em;
  --medida: 60ch;                /* ancho máximo de línea, alineado a la izquierda */

  /* ---------- Espacio (base 4px) ---------- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4.5rem;
  --e-9: 7rem;
  --pad-s: clamp(3rem, 6vw, 5rem);
  --pad-m: clamp(4rem, 8vw, 7.5rem);
  --pad-l: clamp(5rem, 11vw, 10rem);
  --margen: clamp(1.25rem, 7vw, 8rem);   /* lateral de la página */
  --gutter: clamp(1rem, 2vw, 1.5rem);
  --h-cabecera: 3.5rem;                  /* 56px en móvil */
  --h-boton: 3.5rem;                     /* 56px: objetivo táctil holgado */

  /* ---------- Radios: casi todo es recto ---------- */
  --r-0: 0;
  --r-campo: 4px;
  --r-boton: 999px;

  /* ---------- Movimiento: duraciones como tokens, nunca valores sueltos ---------- */
  --t-rapido: 0.18s;
  --t: 0.34s;
  --t-lento: 0.9s;
  --curva: cubic-bezier(0.4, 0, 0.2, 1);
  --t-respiro: 13s;                                  /* ciclo completo: inhalar 4, sostener 2, exhalar 6, pausa 1 */
  --curva-respiro: cubic-bezier(0.37, 0, 0.63, 1);   /* seno entrando y saliendo */

  /* ---------- Iconos ---------- */
  /* Atado al asta vertical de Newsreader regular a 18px (cerca de 1.6px). */
  --trazo-icono: 1.5;

  /* ---------- Foco ---------- */
  --foco: 3px solid var(--verde-hondo);
  --foco-separacion: 3px;
}

/* El apagado del movimiento vive acá y solo acá. Con --t-respiro en 0s la
   respiración queda en su estado base: el mandala abierto, nítido y quieto. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-rapido: 0s;
    --t: 0s;
    --t-lento: 0s;
    --t-respiro: 0s;
  }
  html { scroll-behavior: auto; }
}

@media (min-width: 900px) {
  :root {
    --h-cabecera: 4.5rem;                /* 72px */
  }
}

/* ---------- Scroll (enmienda 1: transiciones entre secciones) ----------
   El movimiento atado al scroll no tiene duración: el tiempo es la posición
   de la persona. Acá viven la curva, las magnitudes y las formas. Las usa
   style.css solo dentro de @supports (animation-timeline: view()) y de
   prefers-reduced-motion: no-preference. */
:root {
  --scroll-curva: cubic-bezier(0.37, 0, 0.63, 1);
  --scroll-hero-escala: 0.85;       /* el mandala se achica al salir el hero (no sube: el abanico ya sube con el hero) */
  --scroll-hero-giro: 6deg;         /* la capa de atrás gira */
  --scroll-palabra-apagada: 0.35;   /* palabra de la banda antes de encenderse */
  --scroll-petalo-tinte: 0.5;       /* Sobre mí: tinte salmón que se desvanece mientras el pétalo se abre */
  /* Pétalo que solo curva el borde superior: punta que se aplana. Los costados empiezan a
     3 % del ancho y llegan a 0 %; la curva vive en una franja superior sin texto (12vh, sin
     pasar del padding superior de la sección). Los polígonos están en style.css (abrir-campo). */
  --scroll-petalo-lado: 3%;
  --scroll-petalo-alto: min(12vh, var(--pad-m));
  --scroll-petalo-fin: 66vh;       /* el rango termina cuando el borde superior llega a un tercio de la pantalla */
}

/* ---------- Versión 2: hero, cabecera y fronteras (DISENO-V2.md, secciones 4 a 7) ----------
   Variante A (la que se publica): el hero y la cabecera comparten un campo verde hondo.
   Variante B (solo en hosts locales, con ?hero=claro; el <head> pone data-hero="claro"):
   el mismo hero sobre papel. Se cambia solo con esta tabla, sin tocar el HTML. */
:root {
  --hero-campo: var(--verde-hondo);
  --hero-texto: var(--papel);                 /* 8.1:1 sobre el campo */
  --hero-suave: var(--regla-verde);           /* oficio, caption, Pausar, mail: 5.8:1 */
  --sepalo-sobre-verde: #34b3a9;              /* el verde de la tarjeta aclarado para leerse sobre verde hondo (3.2:1) */
  --hero-sepalo: var(--sepalo-sobre-verde);
  --hero-boton-fondo: var(--papel);
  --hero-boton-texto: var(--verde-hondo);
  --hero-boton-fondo-hover: var(--salmon);
  --hero-boton-texto-hover: var(--tinta);
  --hero-foco: 3px solid var(--salmon);       /* 4.7:1 sobre el campo */
  --encaje-hero: #386862;                     /* 1.5:1 a propósito: es textura, sin texto encima */
  --hero-alto: max(calc(100svh - var(--h-cabecera)), 34rem);
  --mandala-punta: min(62vw, 42svh);          /* radio al que llegan las puntas de los pétalos */
  --mandala-ancho: calc(var(--mandala-punta) * 2.4167);
  --escala-nombre-hero: clamp(3.5rem, min(1rem + 7vw, 11svh), 6.5rem);   /* 56 a 104px */
  --escala-oficio: clamp(1.75rem, 1rem + 2vw, 2.5rem);                   /* 28 a 40px */
  --escala-hero-frase: clamp(1.75rem, 0.9rem + 2.3vw, 2.5rem);           /* 28 a 40px */
  --cab-campo: var(--verde-hondo);
  --cab-texto: var(--papel);
  --cab-filete: 0;
  --cab-subrayado: var(--salmon);
  --riel-pista: var(--verde-hondo-2);
  --riel-relleno: var(--salmon);              /* 4.7:1 sobre la cabecera */
  --riel-grosor: 2px;
  --aviso-filete: 4px;                        /* urgencias: el único filete grueso, significa "esto es un aviso" */
  --barra-borde: 2px solid var(--papel);      /* la barra fija no se funde al pasar sobre un campo verde */
}

html[data-hero="claro"] {
  --hero-campo: var(--papel);
  --hero-texto: var(--tinta);
  --hero-suave: var(--tinta-suave);           /* 6:1 sobre papel */
  --hero-sepalo: var(--verde-tarjeta);
  --hero-boton-fondo: var(--verde-hondo);
  --hero-boton-texto: var(--papel);
  --hero-boton-fondo-hover: var(--verde-hondo-2);
  --hero-boton-texto-hover: var(--papel);
  --hero-foco: var(--foco);
  --encaje-hero: var(--encaje);
  --cab-campo: var(--papel);
  --cab-texto: var(--tinta);
  --cab-filete: 1px solid var(--regla);
  --cab-subrayado: var(--verde-hondo);
  --riel-pista: var(--regla);
  --riel-relleno: var(--verde-tarjeta);
}