/* Kip-Up · tokens de color (custom properties)
 *
 * Los siete hex de marca (ink, red, orange, cream, white, ink-70, cream-70) son los
 * del manual y no se tocan. Las escalas 50-950 no añaden colores nuevos: son el mismo
 * tono movido en claridad, calculado en OKLab, con el hex de marca clavado en el paso 500.
 *
 * El rojo #E63946 es a la vez el color de acción y el de peligro. Sobre crema da 3.83:1 y sobre blanco 4.17:1: no llega a 4,5:1, así que como TEXTO normal no se usa. Vale como relleno de botón (blanco encima da 4.17:1, AA solo con etiqueta grande) y como texto grande. Para texto normal en rojo, red-700 (#A50022, 7.36:1 sobre crema).
 *
 * Estados: Kip-Up no tenía colores de estado definidos. success e info son una PROPUESTA de este kit, no marca establecida: salen de las paletas de las que ya vienen el rojo y el naranja de Kip-Up (#2A9D8F y #457B9D conviven con #E63946 y #F4A261 en las paletas de origen). warning reutiliza el naranja de marca y danger el rojo de marca. Si la marca fija otros, se cambian aquí y en ningún sitio más.
 *
 * Generado por tokens/build-tokens.mjs — no editar a mano.
 */
:root {
  color-scheme: light;

  /* Núcleo de marca */
  --kipup-ink: #1A1A2E;        /* navy: texto, logo, fondos oscuros */
  --kipup-red: #E63946;        /* acción, la flecha, llamadas a la acción */
  --kipup-orange: #F4A261;     /* acento secundario, ilustración */
  --kipup-cream: #F8F5F0;      /* fondo claro por defecto */
  --kipup-white: #FFFFFF;
  --kipup-ink-70: #55556A;     /* texto secundario sobre claro */
  --kipup-cream-70: #B9B6C9;   /* texto secundario sobre oscuro */

  /* ink */
  --kipup-ink-50: #F8F5F0;
  --kipup-ink-100: #E1DFDE;
  --kipup-ink-200: #C2C0C5;
  --kipup-ink-300: #A3A1AB;
  --kipup-ink-400: #7E7D8D;
  --kipup-ink-500: #55556A;
  --kipup-ink-600: #46465B;
  --kipup-ink-700: #39394E;
  --kipup-ink-800: #2D2D42;
  --kipup-ink-900: #222236;
  --kipup-ink-950: #1A1A2E;

  /* red */
  --kipup-red-50: #FFF5F4;
  --kipup-red-100: #FFDFDD;
  --kipup-red-200: #FFC0BD;
  --kipup-red-300: #FF9D99;
  --kipup-red-400: #FC6D6E;
  --kipup-red-500: #E63946;
  --kipup-red-600: #C80E2E;
  --kipup-red-700: #A50022;
  --kipup-red-800: #840019;
  --kipup-red-900: #630312;
  --kipup-red-950: #4C060E;

  /* orange */
  --kipup-orange-50: #FFF6EF;
  --kipup-orange-100: #FFEBDD;
  --kipup-orange-200: #FFDCC2;
  --kipup-orange-300: #FFCBA5;
  --kipup-orange-400: #FDB782;
  --kipup-orange-500: #F4A261;
  --kipup-orange-600: #CB7D3A;
  --kipup-orange-700: #A35E1F;
  --kipup-orange-800: #7C4614;
  --kipup-orange-900: #572F09;
  --kipup-orange-950: #3F2005;

  /* success */
  --kipup-success-50: #EEFBF9;
  --kipup-success-100: #D8EEEA;
  --kipup-success-200: #B6DED7;
  --kipup-success-300: #91CDC3;
  --kipup-success-400: #63B8AB;
  --kipup-success-500: #2A9D8F;
  --kipup-success-600: #008174;
  --kipup-success-700: #00675C;
  --kipup-success-800: #005047;
  --kipup-success-900: #003A33;
  --kipup-success-950: #002B26;

  /* warning */
  --kipup-warning-50: #FFF6EF;
  --kipup-warning-100: #FFEBDD;
  --kipup-warning-200: #FFDCC2;
  --kipup-warning-300: #FFCBA5;
  --kipup-warning-400: #FDB782;
  --kipup-warning-500: #F4A261;
  --kipup-warning-600: #CB7D3A;
  --kipup-warning-700: #A35E1F;
  --kipup-warning-800: #7C4614;
  --kipup-warning-900: #572F09;
  --kipup-warning-950: #3F2005;

  /* danger */
  --kipup-danger-50: #FFF5F4;
  --kipup-danger-100: #FFDFDD;
  --kipup-danger-200: #FFC0BD;
  --kipup-danger-300: #FF9D99;
  --kipup-danger-400: #FC6D6E;
  --kipup-danger-500: #E63946;
  --kipup-danger-600: #C80E2E;
  --kipup-danger-700: #A50022;
  --kipup-danger-800: #840019;
  --kipup-danger-900: #630312;
  --kipup-danger-950: #4C060E;

  /* info */
  --kipup-info-50: #F1F9FE;
  --kipup-info-100: #DBE8F1;
  --kipup-info-200: #BAD1E1;
  --kipup-info-300: #98B9D0;
  --kipup-info-400: #6F9CBA;
  --kipup-info-500: #457B9D;
  --kipup-info-600: #2F6586;
  --kipup-info-700: #20526F;
  --kipup-info-800: #194057;
  --kipup-info-900: #132F41;
  --kipup-info-950: #0F2431;

  /* Semántica de interfaz (claro).
     El crema es a la vez el fondo de página y el relleno suave dentro de una
     tarjeta blanca (cabecera de tabla, bloque de código): por eso se repite. */
  --kipup-bg: #F8F5F0;
  --kipup-surface: #FFFFFF;
  --kipup-surface-2: #F8F5F0;
  --kipup-surface-3: #E1DFDE;
  --kipup-line: #C2C0C5;
  --kipup-line-strong: #A3A1AB;
  /* Los bordes de campo identifican el control: WCAG 1.4.11 pide 3:1 y los grises
     de separador no llegan. Este sí (4.03:1 sobre blanco). */
  --kipup-line-field: #7E7D8D;
  --kipup-text: #1A1A2E;
  --kipup-text-muted: #55556A;
  --kipup-text-onbrand: #FFFFFF;   /* sobre relleno rojo */
  --kipup-link: #A50022;       /* el rojo de marca no llega a 4,5:1 como texto */
  --kipup-focus: #E63946;
  /* Blanco sobre el rojo de marca da 4.17:1: AA solo con etiqueta grande.
     Para botones con texto de tamaño normal, el mismo rojo un escalón más oscuro
     llega a 5.9:1. */
  --kipup-red-aa: #C80E2E;

  /* Estado, listo para usar (ya elegido el paso que pasa AA) */
  --kipup-success: #008174;
  --kipup-success-text: #00675C;
  --kipup-success-bg: #EEFBF9;
  --kipup-warning: #CB7D3A;
  --kipup-warning-text: #7C4614;
  --kipup-warning-bg: #FFF6EF;
  --kipup-danger: #C80E2E;
  --kipup-danger-text: #A50022;
  --kipup-danger-bg: #FFF5F4;
  --kipup-info: #2F6586;
  --kipup-info-text: #20526F;
  --kipup-info-bg: #F1F9FE;

  /* Forma */
  --kipup-radius-sm: 8px;
  --kipup-radius-md: 12px;
  --kipup-radius-lg: 20px;
  --kipup-radius-pill: 999px;
  --kipup-shadow-soft: 0 1px 2px rgba(26,26,46,.06), 0 2px 6px rgba(26,26,46,.06);
  --kipup-shadow-elevated: 0 10px 30px rgba(26,26,46,.14);

  /* Tipografía. Kip-Up no tiene monoespaciada de marca: pila del sistema. */
  --kipup-font-head: "Poppins", "Segoe UI", Arial, sans-serif;
  --kipup-font-body: "Inter", system-ui, Arial, sans-serif;
  --kipup-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Modo oscuro. El navy de marca es la SUPERFICIE, no el fondo: el fondo baja un
   escalón para que las tarjetas se despeguen sin inventar un color nuevo. */
:root[data-theme="dark"], .dark {
  color-scheme: dark;

  --kipup-bg: #12121F;
  --kipup-surface: #1A1A2E;
  --kipup-surface-2: #26263D;
  --kipup-surface-3: #33334D;
  --kipup-line: #2E2E48;
  --kipup-line-strong: #454563;
  --kipup-line-field: #7E7D8D;
  --kipup-text: #F8F5F0;
  --kipup-text-muted: #B9B6C9;
  --kipup-text-onbrand: #FFFFFF;
  /* Sobre el navy, el rojo de marca se queda en 4.09:1: para texto se aclara. */
  --kipup-link: #FF9D99;
  --kipup-focus: #FC6D6E;

  --kipup-success: #63B8AB;
  --kipup-success-text: #91CDC3;
  --kipup-success-bg: rgba(42,157,143,.16);
  --kipup-warning: #FDB782;
  --kipup-warning-text: #FFCBA5;
  --kipup-warning-bg: rgba(244,162,97,.16);
  --kipup-danger: #FC6D6E;
  --kipup-danger-text: #FF9D99;
  --kipup-danger-bg: rgba(230,57,70,.18);
  --kipup-info: #6F9CBA;
  --kipup-info-text: #98B9D0;
  --kipup-info-bg: rgba(69,123,157,.20);

  --kipup-shadow-soft: 0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
  --kipup-shadow-elevated: 0 10px 30px rgba(0,0,0,.5);
}

/* Quien no pinte un conmutador se lleva el modo del sistema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) {
    color-scheme: dark;
    --kipup-bg: #12121F;
    --kipup-surface: #1A1A2E;
    --kipup-surface-2: #26263D;
    --kipup-surface-3: #33334D;
    --kipup-line: #2E2E48;
    --kipup-line-strong: #454563;
    --kipup-line-field: #7E7D8D;
    --kipup-text: #F8F5F0;
    --kipup-text-muted: #B9B6C9;
    --kipup-link: #FF9D99;
    --kipup-focus: #FC6D6E;
    --kipup-success: #63B8AB;
    --kipup-success-text: #91CDC3;
    --kipup-success-bg: rgba(42,157,143,.16);
    --kipup-warning: #FDB782;
    --kipup-warning-text: #FFCBA5;
    --kipup-warning-bg: rgba(244,162,97,.16);
    --kipup-danger: #FC6D6E;
    --kipup-danger-text: #FF9D99;
    --kipup-danger-bg: rgba(230,57,70,.18);
    --kipup-info: #6F9CBA;
    --kipup-info-text: #98B9D0;
    --kipup-info-bg: rgba(69,123,157,.20);
    --kipup-shadow-soft: 0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
    --kipup-shadow-elevated: 0 10px 30px rgba(0,0,0,.5);
  }
}