/* ==========================================================================
   tokens.css — Sistema de diseño de Grupo C&G
   Única fuente de verdad: color, tipografía fluida, espacio, radios,
   sombras y movimiento. Cambiar un valor aquí actualiza todo el sitio.
   ========================================================================== */
:root {
  /* Color · marca */
  --blue-950: #00062e;
  --blue-900: #00083f;
  --blue-800: #000b74;           /* azul corporativo */
  --blue-700: #0b1a9b;
  --blue-100: #e6e8f7;
  --blue-50:  #f2f3fb;
  --gold-300: #f8cf8e;
  --gold-400: #f2b356;           /* dorado corporativo */
  --gold-700: #8a5a0b;           /* dorado accesible para texto sobre fondo claro */

  /* Color · neutros y semánticos */
  --white: #fff;
  --ink: #0e1126;
  --ink-soft: #454b63;           /* 8:1 sobre blanco */
  --line: #e2e4ee;
  --paper: #f6f7fb;
  --wa: #1fa855;
  --focus: #f2b356;

  /* Tipografía */
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs:   clamp(0.78rem, 0.76rem + 0.10vw, 0.85rem);
  --fs-sm:   clamp(0.875rem, 0.85rem + 0.12vw, 0.95rem);
  --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-md:   clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --fs-lg:   clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --fs-xl:   clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-2xl:  clamp(2rem, 1.45rem + 2.6vw, 3.5rem);
  --fs-hero: clamp(2.4rem, 1.25rem + 4.8vw, 5.25rem);

  /* Espacio y layout */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --container: 1200px;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --header-h: 76px;
  --header-h-scrolled: 66px;

  /* Radios (jerarquía: controles < tarjetas < superficies grandes) */
  --r-xs: 4px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Sombras con tinte azul de marca */
  --shadow-xs: 0 1px 2px rgb(0 11 116 / .06);
  --shadow-sm: 0 2px 8px -2px rgb(0 11 116 / .10), 0 1px 2px rgb(0 11 116 / .06);
  --shadow-md: 0 12px 28px -10px rgb(0 11 116 / .20), 0 2px 6px rgb(0 11 116 / .06);
  --shadow-lg: 0 28px 56px -18px rgb(0 11 116 / .32), 0 4px 12px rgb(0 11 116 / .08);
  --shadow-gold: 0 12px 30px -10px rgb(242 179 86 / .6);

  /* Movimiento */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: .16s;
  --dur-2: .32s;
  --dur-3: .7s;

  /* Capas */
  --z-header: 100;
  --z-float: 90;
  --z-lightbox: 200;
}