/* ==========================================================================
   Clima Central — Design tokens
   Valores extraídos literalmente del proyecto de Claude Design
   "Disseny web multi-pàgina aerotermia". No inventar colores ni radios
   fuera de esta lista: cualquier valor nuevo se añade primero aquí.
   ========================================================================== */

:root {
  /* --- Color -------------------------------------------------------- */
  --c-ink: #1A1A1A;          /* texto principal, superficies oscuras     */
  --c-ink-soft: #242424;     /* tarjeta dentro de sección oscura         */
  --c-body: #555555;         /* párrafos                                 */
  --c-muted: #888888;        /* metadatos, labels                        */
  --c-muted-dark: #AAAAAA;   /* metadatos sobre fondo oscuro             */
  --c-line-strong: #CCCCCC;  /* borde de píldora destacada               */
  --c-line: #E8E8E8;         /* borde por defecto y separadores          */
  --c-surface: #F5F5F5;      /* fondo de sección y tarjeta suave         */
  --c-white: #FFFFFF;
  --c-lime: #B5F231;         /* acento de marca                          */
  --c-lime-hover: #D7F448;
  --c-green: #0A3D2E;        /* footer, hover oscuro, conversión         */

  /* Escalas sobre fondo oscuro */
  --c-on-dark-70: rgba(255, 255, 255, 0.72);
  --c-on-dark-60: rgba(255, 255, 255, 0.60);
  --c-on-dark-55: rgba(255, 255, 255, 0.55);
  --c-on-dark-50: rgba(255, 255, 255, 0.50);
  --c-on-dark-line: rgba(255, 255, 255, 0.14);
  --c-on-dark-fill: rgba(255, 255, 255, 0.08);
  --c-on-dark-fill-strong: rgba(255, 255, 255, 0.06);

  /* Estado (ayudas, disponibilidad) */
  --c-state-open: #0A3D2E;
  --c-state-closed: #888888;

  /* --- Tipografía --------------------------------------------------- */
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-19: 19px;
  --fs-20: 20px;
  --fs-22: 22px;

  /* Fluidas: el design usa clamp() en todos los títulos */
  --fs-h1: clamp(33px, 5vw, 54px);
  --fs-h1-inner: clamp(31px, 4.6vw, 50px);   /* páginas interiores */
  --fs-h2: clamp(27px, 3.6vw, 38px);
  --fs-h2-sm: clamp(26px, 3.4vw, 36px);
  --fs-h2-card: clamp(21px, 2.4vw, 26px);
  --fs-h2-dark: clamp(23px, 2.8vw, 30px);
  --fs-cta: clamp(28px, 3.8vw, 40px);
  --fs-figure: clamp(25px, 3.2vw, 34px);
  --fs-stat: clamp(24px, 3vw, 32px);

  --lh-tight: 1.08;
  --lh-title: 1.2;
  --lh-heading: 1.35;
  --lh-body: 1.6;

  --ls-tight: -0.025em;
  --ls-title: -0.02em;
  --ls-eyebrow: 1.5px;

  /* --- Radios ------------------------------------------------------- */
  --r-pill: 50px;
  --r-nav: 28px;
  --r-drawer: 24px;
  --r-card: 20px;
  --r-block: 16px;
  --r-item: 14px;
  --r-chip: 12px;
  --r-icon: 8px;
  --r-icon-sm: 7px;

  /* --- Sombras ------------------------------------------------------ */
  --sh-nav: 0 1px 4px rgba(26, 26, 26, 0.07);
  --sh-pop: 0 12px 40px rgba(26, 26, 26, 0.14);

  /* --- Layout ------------------------------------------------------- */
  --wrap: 1200px;
  --wrap-nav: 1320px;
  --pad-x: clamp(16px, 4vw, 24px);
  --pad-y: clamp(56px, 9vw, 96px);
  --pad-y-sm: clamp(40px, 6vw, 56px);
  --pad-card: clamp(22px, 3.2vw, 32px);
  --gap-col: clamp(32px, 5vw, 64px);
  --gap: 16px;

  /* Punto de cambio nav escritorio / móvil (igual que el design: 1160px) */
  --bp-nav: 1160px;

  --focus: 2px solid var(--c-green);
  --focus-offset: 3px;
}