/* =============================================================================
 * KYROS · Sistema de diseño (design tokens)
 * -----------------------------------------------------------------------------
 * ÚNICA fuente de verdad para color, espaciado, tipografía, radios y sombras.
 *
 * ¿Cómo funciona con los Web Components?
 *   Estas variables viven en :root (documento). Las propiedades CSS personalizadas
 *   se HEREDAN a través del Shadow DOM, así que cualquier componente puede usar
 *   `var(--k-...)` dentro de su `css()` y resolverá a estos valores.
 *
 * ¿Quieres cambiar la marca/colores?  Edita SOLO este archivo.
 *   - No hardcodees hex en los componentes: usa siempre `var(--k-...)`.
 *
 * Convención de nombres de token:
 *   --k-<concepto>[-<variante>]   ej. --k-primary, --k-danger-50, --k-text-muted
 *   Escalas de tinte: 50 (más claro) -> 100 -> 200 ... -> strong (más oscuro)
 * ========================================================================== */
:root {
  /* --- Marca / primario ------------------------------------------------- */
  --k-primary: #4154f1; /* acción principal, foco, links            */
  --k-primary-strong: #3441b8; /* texto sobre fondos info                  */
  --k-primary-dark: #012970; /* navy de marca (= texto de títulos)       */
  --k-primary-100: #cdd6ff; /* borde de avisos info                     */
  --k-primary-soft: #eef2ff; /* fondo de avisos info                     */
  --k-primary-50: #f6f9ff; /* tinte muy claro / hover suave            */

  /* --- Texto ------------------------------------------------------------ */
  --k-text-strong: #012970; /* títulos                                  */
  --k-text: #444f6b; /* cuerpo                                    */
  --k-text-muted: #6b7384; /* secundario                               */
  --k-text-faint: #98a2b3; /* terciario / placeholders                 */

  /* --- Superficies y bordes -------------------------------------------- */
  --k-bg: #f6f9ff; /* fondo de página                          */
  --k-surface: #ffffff; /* tarjetas, inputs                         */
  --k-neutral-50: #f1f4fb; /* relleno neutro (thumbs, placeholders)    */
  --k-border: #e4e8f1; /* borde suave (tarjetas)                   */
  --k-border-strong: #cdd4dd; /* borde de inputs / dashed                 */

  /* --- Éxito ------------------------------------------------------------ */
  --k-success: #1b8a4b;
  --k-success-strong: #0a7a3b;
  --k-success-100: #b6e2c6; /* borde                                    */
  --k-success-soft: #e8f5ed; /* fondo                                    */
  --k-success-50: #e9f7ef; /* fondo alterno                            */

  /* --- Peligro / error -------------------------------------------------- */
  --k-danger: #d12c2c;
  --k-danger-strong: #b32424;
  --k-danger-100: #f5c2c2; /* borde                                    */
  --k-danger-50: #fff5f5; /* fondo                                    */

  /* --- Advertencia ------------------------------------------------------ */
  --k-warn: #ef6c00;
  --k-warn-strong: #b26a00;
  --k-warn-50: #fff4e5; /* fondo                                    */

  /* --- Radios ----------------------------------------------------------- */
  --k-radius-sm: 8px;
  --k-radius-md: 10px;
  --k-radius-lg: 14px;
  --k-radius-pill: 999px;

  /* --- Sombras ---------------------------------------------------------- */
  --k-shadow-sm: 0 2px 6px rgba(1, 41, 112, 0.05);
  --k-shadow-md: 0 8px 20px rgba(1, 41, 112, 0.1);
  --k-shadow-lg: 0 16px 40px rgba(1, 41, 112, 0.18);

  /* --- Tipografía ------------------------------------------------------- */
  --k-font-body: "Open Sans", system-ui, -apple-system, sans-serif;
  --k-font-heading: "Nunito", system-ui, sans-serif;
}