/* ============================================================================
   Cumplo1000 — Design tokens
   ----------------------------------------------------------------------------
   Único origen de verdad de la paleta, la tipografía y la geometría del sitio.
   Lo cargan las 7 páginas; ver ARQUITECTURA.md §1c.

   Orden de carga obligatorio en el <head>:
     Google Fonts → tokens.css → base.css → components.css → <style> local
   El <style> local va último a propósito: así una página sobreescribe cualquier
   token declarando su propio :root, ganando por orden de fuente y sin recurrir
   a !important.

   Reglas:
   - Color, radio o tipografía nueva se agrega acá, no como hex suelto.
   - Los breakpoints NO pueden vivir acá: var() no funciona dentro de @media.
     Quedan documentados abajo como referencia.
   ========================================================================= */

:root {
  /* ---- Morado: acento de marca ------------------------------------------ */
  --purple-100:  rgb(249, 241, 255);
  --purple-200:  rgb(246, 233, 255);
  --purple-300:  rgb(238, 222, 255);
  --purple-600:  rgb(188, 135, 241);
  --purple-800:  rgb(135,  55, 208);
  --purple-1100: rgb( 86,  41, 122);

  /* ---- Verde Cumplo ----------------------------------------------------- */
  /* --brand-200 unificado: antes listado/ y registro-sii/ usaban
     rgb(187,247,208), que es el green-200 de Tailwind y no pertenece a esta
     rampa. El valor que queda interpola el verde real de Cumplo hacia el
     blanco. */
  --brand-200:  rgb(208, 255, 209);
  --brand-500:  rgb(131, 241, 144);
  --brand-700:  rgb( 51, 209, 101);
  --brand-800:  rgb( 37, 179,  96);
  --brand-1000: rgb( 15, 112,  87);

  /* ---- Ámbar de "pendiente" --------------------------------------------- */
  /* Estado intermedio de los badges del admin (ni verde ni rojo). Venía como
     hex suelto en el CSS que el panel inyectaba en runtime. */
  --amber-100: rgb(255, 243, 214);
  --amber-800: rgb(156, 107,   0);

  /* ---- Rojo de error ---------------------------------------------------- */
  /* Único rojo del sistema. El index tenía además --red-700 rgb(239,68,68)
     para el mismo rol; se retiró. */
  --red-800: rgb(220, 38, 38);

  /* ---- Neutrales -------------------------------------------------------- */
  /* --gray-500 unificado: política y términos usaban rgb(209,213,219)
     (gray-300 de Tailwind). Solo afecta al texto del footer sobre
     --gray-1100; ambos valores pasan AA. */
  --gray-0:    rgb(255, 255, 255);
  --gray-50:   rgb(249, 250, 251);
  --gray-100:  rgb(243, 244, 247);
  --gray-200:  rgb(238, 240, 243);
  --gray-300:  rgb(231, 233, 239);
  --gray-400:  rgb(223, 226, 232);
  --gray-500:  rgb(187, 193, 203);
  --gray-600:  rgb(156, 163, 175);
  --gray-700:  rgb(107, 114, 128);
  --gray-800:  rgb( 75,  85,  99);
  --gray-900:  rgb( 55,  65,  81);
  --gray-1000: rgb( 31,  41,  55);
  --gray-1100: rgb( 20,  26,  39);

  /* ---- Semánticos ------------------------------------------------------- */
  --text-primary:   var(--gray-1000);
  --text-secondary: var(--gray-800);

  /* Fondo de página. base.css lo consume en body; las páginas que van en
     blanco (index y registro-sii) lo sobreescriben en su :root local.
     El default es el valor mayoritario, así que una página que se olvide de
     declararlo cae en gris claro y no en transparente. */
  --page-bg: var(--gray-50);

  /* ---- Tipografía ------------------------------------------------------- */
  /* Inter + Poppins se cargan desde Google Fonts en el <head> de cada página. */
  --font-family:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:     'Poppins', 'Inter', sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-family-mui:  'Inter', 'Roboto', sans-serif;

  /* ---- Geometría -------------------------------------------------------- */
  --radius:      12px;
  --radius-pill: 999px;
  --nav-h:       54px;

  /* ---- Campos de formulario -------------------------------------------- */
  --field-bg:     #f4fbf7;
  --field-border: #d7eee1;

  /* ---- Elevación -------------------------------------------------------- */
  /* Nombre por rol en vez del viejo --shadow-1, que significaba dos recetas
     distintas según la página. */
  --shadow-table: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
}

/* ----------------------------------------------------------------------------
   Breakpoints en uso (referencia; var() no sirve dentro de @media)
     640px  → listado: grid del formulario de contacto a una columna
     860px  → registro-sii: hero + formulario a una columna
     880px  → nav público: se oculta la barra de links y aparece el burger
     900px  → admin: sidebar colapsado
    1500px  → admin: ancho de contenido ampliado
   ------------------------------------------------------------------------- */
