/* ============================================================
   tokens.css — variables de diseño de sacaleta.es
   Fuente: Kit Elementor 1477 (paleta) + style guide (_handoff/style-guide.md).
   ============================================================ */
:root {
  /* Tipografía */
  --font-display: "GrindyLow", "Brush Script MT", cursive;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Escala tipográfica (base 16px) */
  --fs-body: 1rem;          /* 16px cuerpo (subido de 15px del original para legibilidad) */
  --fs-small: 0.8125rem;    /* 13px */
  --fs-lead: 1.125rem;      /* 18px */
  --fs-h3: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);   /* ~28–40px titulares display */
  --fs-h2: clamp(2rem, 1.3rem + 3vw, 3rem);        /* ~32–48px */
  --fs-h1: clamp(2.5rem, 1.6rem + 4.5vw, 4rem);    /* ~40–64px hero */
  --lh-body: 1.65;
  --lh-heading: 1.15;

  /* Paleta de marca (OKLCH, neutrales tintados hacia el teal) */
  --color-primary: oklch(0.50 0.07 200);        /* teal de marca ≈ #007179 */
  --color-primary-dark: oklch(0.42 0.06 200);   /* ≈ #00555E */
  --color-secondary: oklch(0.45 0.01 220);      /* gris azulado */
  --color-text: oklch(0.46 0.012 200);          /* cuerpo: gris cálido legible (sube contraste vs #7a7a7a) */
  --color-ink: oklch(0.34 0.015 220);           /* titulares/labels */
  --color-heading: oklch(0.50 0.07 200);        /* titulares teal */
  --color-line: oklch(0.90 0.006 200);          /* bordes sutiles tintados */

  /* Fondos (tintados, nunca blanco puro) */
  --bg-gray: oklch(0.975 0.004 200);            /* gris frío tintado al teal ≈ #F5F5F5 — ÚNICO tono de sección */
  --bg-beige: var(--bg-gray);                   /* deprecado: alias del gris (antes beige cálido, rompía la temperatura) */
  --white: oklch(0.995 0.002 200);              /* casi blanco, leve tinte */

  /* Elevación: sombra cálida tintada (nunca negra pura) */
  --shadow-soft: 0 10px 30px -18px oklch(0.42 0.06 200 / 0.35);
  --shadow-media: 0 26px 60px -34px oklch(0.42 0.06 200 / 0.45);
  --radius: 14px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --container: 1140px;
  --container-narrow: 760px;
  --space-section: clamp(3.5rem, 2.5rem + 4vw, 7rem);
  --bp-md: 768px;
  --bp-lg: 1025px;
}