/* TecnoFinanzas · tokens (rediseño 2026-09-08; tema de tarjetas aprobado por Diego el 2026-09-12). Único archivo con colores literales.
   Fondo gris cálido con tarjetas blancas de esquinas redondeadas y sombra suave. El ámbar es el color principal: acción primaria, menú activo,
   serie principal de las gráficas; el texto sobre ámbar va en tinta y los enlaces en ámbar oscuro (el ámbar puro no se lee sobre blanco).
   Verde/rojo/naranja solo para estado, siempre con texto. Sin fuentes web: pila sans del sistema. */
:root {
  /* Superficies */
  --tf-canvas: #F4F4F1;
  --tf-paper: #FFFFFF;
  --tf-card: #FFFFFF;
  --tf-paper-2: color-mix(in srgb, var(--tf-gris) 10%, var(--tf-paper));

  /* Texto */
  --tf-ink: #201E1D;
  --tf-gris: #8C9295;
  --tf-ink-2: #5F6366;

  /* Acentos */
  --tf-amber: #F5B33F;
  --tf-amber-ink: #8A5A0B;
  --tf-blue: #1A46E5;
  --tf-blue-soft: rgba(26, 70, 229, .08);
  --tf-orange: #E8741F;
  --tf-green: #0F8F6C;
  --tf-red: #C0392B;

  /* Trazos: con tarjetas, los bordes son suaves; la tinta queda para énfasis puntual */
  --tf-borde: #E7E6E1;
  --tf-line: #E7E6E1;
  --tf-line-2: #EFEEEA;
  --tf-line-strong: #CFCCC3;
  --tf-regla: 1px solid var(--tf-borde);
  --tf-filo: 1px solid var(--tf-line-2);

  /* Exclusivo del logotipo (del vector) */
  --tf-logo-gris: #7A838E;

  /* Derivados: mezclas de la paleta, nunca nuevos literales */
  --tf-amber-strong: color-mix(in srgb, var(--tf-amber) 88%, var(--tf-ink));
  --tf-amber-soft: color-mix(in srgb, var(--tf-amber) 20%, var(--tf-paper));
  --tf-blue-strong: color-mix(in srgb, var(--tf-blue) 78%, var(--tf-ink));
  --tf-blue-ink: color-mix(in srgb, var(--tf-blue) 70%, var(--tf-ink));
  --tf-red-soft: color-mix(in srgb, var(--tf-red) 10%, var(--tf-paper));
  --tf-green-soft: color-mix(in srgb, var(--tf-green) 12%, var(--tf-paper));
  --tf-orange-soft: color-mix(in srgb, var(--tf-orange) 14%, var(--tf-paper));
  --tf-orange-ink: color-mix(in srgb, var(--tf-orange) 62%, var(--tf-ink));
  --tf-on-ink: var(--tf-paper);
  --tf-on-ink-2: color-mix(in srgb, var(--tf-paper) 68%, var(--tf-ink));
  --tf-ink-hover: var(--tf-canvas);
  --tf-enlace: var(--tf-amber-ink);
  --tf-enlace-hover: var(--tf-ink);

  /* Relieve y formas */
  --tf-sombra: 0 1px 2px rgba(32, 30, 29, .05), 0 3px 10px rgba(32, 30, 29, .04);
  --tf-radius: 10px;
  --tf-radius-control: 8px;
  --tf-radius-pastilla: 999px;

  /* Series de gráficas */
  --tf-serie-1: var(--tf-amber);
  --tf-serie-1-fuerte: var(--tf-amber-strong);
  --tf-serie-2: var(--tf-ink);
  --tf-serie-3: var(--tf-blue);
  --tf-serie-4: var(--tf-gris);

  /* Tipografía: una sola pila sans del sistema; los kickers van en mayúsculas de 11 px con letter-spacing */
  --tf-font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tf-font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tf-font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
  --tf-font-kicker: 0.6875rem;
  --tf-font-xs: 0.75rem;
  --tf-font-sm: 0.8125rem;
  --tf-font-md: 0.875rem;
  --tf-font-lg: 1rem;
  --tf-font-xl: 1.25rem;
  --tf-font-xxl: 1.75rem;
  --tf-font-display-size: 1.5rem;

  /* Una sola escala de espacio: 4 · 8 · 12 · 16 · 24 · 32 · 48 */
  --tf-space-1: 0.25rem;
  --tf-space-2: 0.5rem;
  --tf-space-3: 0.75rem;
  --tf-space-4: 1rem;
  --tf-space-5: 1.5rem;
  --tf-space-6: 2rem;
  --tf-space-7: 3rem;

  --tf-lateral: 15rem;
  --tf-lectura: 90rem;
  --tf-control: 2.25rem;
}