/* =========================================================
   CAPA 1 · TOKENS
   Los valores de marca en un solo lugar. Cambia un color o
   una fuente aquí y se actualiza en todo el sitio.
   Paleta oficial: #fc6625 · #8f9491 · #474747 · #000 · #fff
   ========================================================= */
:root {
  /* Colores de marca */
  --orange: #fc6625;        /* naranja PARFI: botones, acentos */
  --orange-deep: #d94e12;   /* naranja para texto sobre blanco (mejor contraste) */
  --steel: #8f9491;         /* gris de marca */
  --charcoal: #474747;      /* gris oscuro de marca */

  /* Fondos */
  --night: #0b0b0b;         /* secciones oscuras */
  --night-2: #161616;       /* tarjetas sobre fondo oscuro */
  --paper: #ffffff;         /* secciones claras */
  --paper-2: #f4f4f3;       /* secciones claras alternas */

  /* Texto */
  --ink: #121212;           /* texto principal sobre claro */
  --ink-soft: #4d4f4e;      /* texto secundario sobre claro */
  --on-dark: #c9cccb;       /* texto secundario sobre oscuro */
  --on-dark-strong: #dedfde;
  --nav-link: #d6d8d7;

  /* Líneas y estados */
  --line-dark: rgba(255, 255, 255, .12);
  --line-light: #e3e4e3;
  --ok: #3ccf7a;            /* "aprobado" del cobro de ejemplo */
  --error: #b02a14;

  /* Tipografía (Google Fonts, cargadas en index.html) */
  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Escala de tamaños de título */
  --step-1: 1.25rem;
  --step-2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --step-3: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --step-4: clamp(2.5rem, 1.5rem + 4.4vw, 5rem);

  /* Medidas */
  --wrap: 1180px;           /* ancho máximo del contenido */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}