/* Tokens del diseño 2a (docs/refresh/diseno/handoff/periocare-2a-tokens.css).
   Las medidas del handoff son de escritorio (1200 px); aquí son fluidas entre 360 px y 1200 px. */
@layer tokens {
  :root {
    /* Fuentes */
    --font-display: "Newsreader", Georgia, serif;
    --font-body: "Instrument Sans", system-ui, sans-serif;

    /* Color */
    --ink: #191625;
    --accent: #b0175c;
    --accent-strong: #8e1249;
    --brand-blue: #3d4cf5;
    --text-muted: #4d4859;
    --bg: #ffffff;
    --surface: #faf8fb;
    --surface-muted: #f5f3f6;
    --on-dark: #e9e5ef;
    --on-dark-muted: #bcb5c9;
    --border: rgb(25 22 37 / 0.08);
    --border-strong: rgb(25 22 37 / 0.1);
    --shadow-nav: 0 8px 20px rgb(25 22 37 / 0.06);
    --focus-ring: 0 0 0 3px rgb(176 23 92 / 0.35);

    /* Radios */
    --radius-pill: 999px;
    --radius-card: 16px;
    --radius-band: 14px;

    /* Tipografía: 360 px → 1200 px */
    --text-h1: clamp(2.5rem, 1.91rem + 2.62vw, 3.875rem);      /* 40 → 62 */
    --text-h2: clamp(1.875rem, 1.66rem + 0.95vw, 2.375rem);    /* 30 → 38 */
    --text-h2-cta: clamp(1.75rem, 1.59rem + 0.71vw, 2.125rem); /* 28 → 34 */
    --text-h3: clamp(1.375rem, 1.24rem + 0.6vw, 1.6875rem);    /* 22 → 27 */
    --text-lead: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);     /* 16 → 17 */
    --text-body: 0.9375rem;                                    /* 15 */
    --text-small: 0.875rem;                                    /* 14 */
    --text-eyebrow: 0.75rem;                                   /* 12 */
    --text-label: 0.6875rem;                                   /* 11 */

    /* Espacio */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2rem;
    --space-xl: 2.5rem;
    --space-2xl: 3.5rem;

    /* Layout */
    --page-max: 1200px;
    --gutter: clamp(1.25rem, 0.71rem + 2.38vw, 3.5rem);        /* 20 → 56 */
    --section-pad: clamp(3rem, 2.36rem + 2.86vw, 4.5rem);      /* 48 → 72 */
    --logo-hero: clamp(72px, 62px + 4.5vw, 110px);
    --logo-nav: clamp(42px, 36px + 0.8vw, 48px);
    --header-height: 60px;
    --glass-gap: clamp(0.625rem, 0.4rem + 1vw, 1rem);
    --sheet-overlap: clamp(3rem, 1.5rem + 6vw, 8rem);
    --tap-min: 44px;
  }
}