/* ============================================================================
   MATTES 2.0 — Design tokens
   Fuente de la verdad visual: Figma "MATTES Evolutivo" (variables locales).
   Todo color/radio/sombra/tipografía del rediseño sale de aquí; ninguna
   pantalla del rediseño declara valores crudos propios.
   ========================================================================== */

:root {
  /* --- Paleta ------------------------------------------------------------ */
  --gris-0:   #ffffff;
  --gris-50:  #f4f7f9;
  --gris-200: #d7dadd;
  --gris-500: #6e7478;
  --gris-700: #404142;
  --gris-900: #141516;

  --mattes-50:  #f0f8ff;
  --mattes-200: #a7d9fc;
  --mattes-300: #65ccff;
  --mattes-500: #0088f7;

  --amarillo-50:  #fff8e5;
  --amarillo-500: #ffbe00;
  --amarillo-600: #e0a600;

  --tinta-900: #0e2136;

  --negro: #000000;

  /* --- Aliases semánticos ------------------------------------------------ */
  --text-heading: var(--negro);
  --text-body:    var(--gris-700);
  --text-muted:   var(--gris-500);

  --surface:      var(--gris-0);
  --surface-alt:  var(--gris-50);
  --surface-dark: var(--tinta-900);

  --action-primary-bg:       var(--mattes-500);
  --action-primary-fg:       var(--gris-0);
  --action-secondary-border: var(--negro);
  --action-secondary-fg:     var(--negro);

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

  /* --- Sombras (Figma: Shadow/sm·md·lg) ---------------------------------- */
  --shadow-sm: 0 2px 6px rgba(20, 21, 22, 0.08);
  --shadow-md: 0 6px 18px rgba(20, 21, 22, 0.10);
  --shadow-lg: 0 12px 32px rgba(20, 21, 22, 0.14);

  /* --- Tipografía --------------------------------------------------------
     Jost (variable, autohospedada) sustituye a Century Gothic. */
  --font-sans: "Jost", "Century Gothic", "CenturyGothic", "AppleGothic",
               system-ui, -apple-system, "Segoe UI", sans-serif;

  --tracking-caps: 0.09em;

  /* --- Layout ------------------------------------------------------------ */
  --contenedor-max: 1180px;
  --contenedor-pad: 34px;
}