/* Fasi — Paleta de color.
   Regla dura: teal-500 y coral-500 SIEMPRE llevan texto tinta (#1A1A1A).
   Nunca blanco sobre teal-500 (2.5:1) ni sobre coral-500 (2.8:1).
   Para teal o coral como TEXTO sobre blanco, usar el tono 800. */
:root{
  /* --- Marca: verde azulado (primario) --- */
  --teal-50:#EAF9F6;   /* fondo de sección teñido */
  --teal-100:#CBF1EA;  /* chips, resaltados, selección */
  --teal-500:#14B8A6;  /* PRIMARIO — botón, marca, subrayado */
  --teal-600:#10A899;  /* hover de superficie primaria */
  --teal-700:#0B8B7E;  /* pressed */
  --teal-800:#0A6E64;  /* teal como TEXTO o borde sobre claro (6.1:1) */

  /* --- Marca: coral (acento) --- */
  --coral-50:#FEF1E7;
  --coral-100:#FCDCC4;
  --coral-500:#F97316; /* ACENTO — con moderación: uno por pantalla */
  --coral-600:#E56507;
  --coral-700:#C2530A;
  --coral-800:#B94C04; /* coral como TEXTO sobre claro (5.1:1) */

  /* --- Tinta y neutros cálidos --- */
  --ink-900:#1A1A1A;   /* base dark slate — texto y secciones oscuras */
  --ink-800:#262626;   /* superficie elevada dentro de sección oscura */
  --ink-700:#3D3B38;   /* pressed de superficies oscuras */
  --gray-600:#57534E;  /* texto secundario sobre claro (7.4:1) */
  --gray-400:#8A857D;  /* texto terciario, metadatos, placeholder */
  --gray-200:#DFDBD4;  /* borde por defecto, divisores */
  --gray-100:#EDEAE4;  /* borde suave, superficie hundida */
  --off-white:#F7F5F2; /* fondo alterno cálido */
  --white:#FFFFFF;

  /* --- Semánticos: superficie --- */
  --surface-page:var(--white);
  --surface-alt:var(--off-white);
  --surface-dark:var(--ink-900);
  --surface-dark-raised:var(--ink-800);
  --surface-card:var(--white);
  --surface-sunken:var(--gray-100);
  --surface-brand:var(--teal-500);
  --surface-brand-soft:var(--teal-50);
  --surface-accent:var(--coral-500);

  /* --- Semánticos: texto --- */
  --text-heading:var(--ink-900);
  --text-body:var(--gray-600);
  --text-muted:var(--gray-400);
  --text-on-dark:var(--white);
  --text-on-dark-muted:#A8A29A;
  --text-on-brand:var(--ink-900);
  --text-on-accent:var(--ink-900);
  --text-brand:var(--teal-800);
  --text-accent:var(--coral-800);
  --text-link:var(--teal-800);
  --text-link-hover:var(--ink-900);

  /* --- Semánticos: borde --- */
  --border-subtle:var(--gray-100);
  --border-default:var(--gray-200);
  --border-strong:var(--ink-900);
  --border-on-dark:#3A3A3A;
  --border-focus:var(--teal-500);
  --border-error:var(--coral-700);
}