/* Sistema de diseño de AutoContratos · valores.
 *
 * Único lugar donde existe un color, un tamaño de letra, un espacio, un radio,
 * una sombra o una duración. Las tres superficies (consola, portal, pantalla)
 * cargan esta hoja antes que ninguna otra y sólo usan `var(--…)`; una prueba
 * rechaza cualquier hexadecimal fuera de este archivo.
 *
 * Identidad: la de KriteriusMX (DD-20, Enmienda 05), refinada y no
 * rediseñada (decisión de Gonzalo, 24-sep-2026): crema y verde profundo de
 * fondo, verde de marca, ámbar sólo para la acción primaria.
 *
 * Temas. `:root` es el tema claro, el de portal y pantalla. La consola
 * arranca en oscuro con `<html data-tema="oscuro">` y su interruptor cambia
 * el atributo; nada más decide el tema.
 *
 * Capas. El orden se declara aquí, en la primera hoja que llega: base <
 * componentes < superficie. Así el orden de los `<link>` deja de decidir
 * quién gana y la hoja de cada superficie siempre puede afinar.
 */

@layer base, componentes, superficie;

:root {
  /* ── Color · tema claro ──────────────────────────────────────────────── */
  --color-fondo: #F7F4EC;
  --color-superficie: #FFFFFF;
  --color-superficie-2: #EFEADC;
  --color-borde: #DCD5C3;
  --color-borde-suave: #E8E2D3;
  --color-borde-control: #77836D;
  --color-texto: #1B2416;
  --color-texto-tenue: #626B57;

  --color-marca: #3D6B33;          /* isotipo, iconos, rellenos, selección */
  --color-marca-texto: #2E5326;    /* el mismo verde cuando es texto (≥ 4.5:1) */
  --color-marca-fondo: #E4EADD;
  --color-toggle-texto: #12160E;
  --color-toggle-fondo: #E8C766;

  --color-accion: #D2882C;         /* una acción primaria por vista */
  --color-accion-texto: #101A0C;
  --color-accion-hover: #EBA345;

  --color-enlace: #805010;
  --color-enlace-hover: #6F460F;

  --color-atencion: #805010;
  --color-atencion-fondo: #F5E9D6;
  --color-peligro: #A33B28;
  --color-peligro-fondo: #FBEEEB;
  --color-afirmacion: #6B2FA8;     /* sólo pantalla: «Lo afirmo yo» (DD-09) */
  --color-afirmacion-fondo: #F2E9FB;

  /* La hoja del contrato (editor de papel): un documento es blanco marfil en
     los dos temas, con su tinta y su acento propios; no sigue el tema. */
  --color-papel: #FFFEF9;
  --color-papel-tinta: #191712;
  --color-papel-acento: #805010;
  --color-papel-seleccion: #F2D59D;
  --color-papel-hover: #FFF7E8;
  --color-papel-borde: #BBB3A2;

  --color-foco: #2E5326;
  --color-velo: rgba(27, 36, 22, .45);
  --color-sombra: rgba(27, 36, 22, .18);
  --color-sombra-suave: rgba(27, 36, 22, .08);

  /* Recorrido interactivo amarillo, autorizado por Gonzalo el 29-sep-2026. */
  --color-tour-fondo: #FFF0A8;
  --color-tour-texto: #26311D;
  --color-tour-secundario: #536039;
  --color-tour-control: #FFF8D8;
  --color-tour-anillo: #AD7915;
  --z-tour: 45;

  /* ── Tipografía ──────────────────────────────────────────────────────── */
  --fuente-titulos: "Pagella", "Pagella respaldo", "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", serif;
  --fuente-texto: "Figtree", "Figtree respaldo", "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fuente-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --t-1: .8125rem;   /* 13 px · apuntes, chips, pies */
  --t-2: .875rem;    /* 14 px · tablas, ayudas, botones chicos */
  --t-3: 1rem;       /* 16 px · cuerpo en las tres superficies */
  --t-4: 1.125rem;   /* 18 px · títulos de tarjeta y diálogo */
  --t-5: 1.5rem;     /* 24 px · título de vista */
  --t-6: 1.75rem;    /* 28 px · portada, acceso */

  --interlineado-cuerpo: 1.5;
  --interlineado-titulos: 1.25;

  /* ── Espacio (múltiplos de 4) ────────────────────────────────────────── */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;

  /* ── Forma ───────────────────────────────────────────────────────────── */
  --r-control: 8px;    /* botones, campos, chips cuadrados */
  --r-tarjeta: 12px;
  --r-dialogo: 16px;
  --r-pill: 999px;

  --alto-control: 40px;       /* escritorio */
  --alto-control-tactil: 44px;
  --alto-control-chico: 32px;

  /* ── Profundidad ─────────────────────────────────────────────────────── */
  --sombra-1: 0 1px 3px var(--color-sombra-suave);
  --sombra-2: 0 8px 24px -8px var(--color-sombra), 0 2px 6px var(--color-sombra);

  /* ── Movimiento ──────────────────────────────────────────────────────── */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-giro: 900ms;     /* una vuelta del spinner */
  --dur-brillo: 1400ms;  /* un barrido del esqueleto */
  --dur-pluma: 2400ms;   /* actividad documental, nunca porcentaje */
  --curva: cubic-bezier(.2, .8, .2, 1);

  /* ── Apilamiento ─────────────────────────────────────────────────────── */
  --z-nav: 10;
  --z-pegajoso: 20;
  --z-toast: 40;
}

:root[data-tema="oscuro"] {
  --color-tour-fondo: #FFF0A8;
  --color-tour-texto: #26311D;
  --color-tour-secundario: #536039;
  --color-tour-control: #FFF8D8;
  --color-tour-anillo: #AD7915;
  --color-toggle-texto: #12160E;
  --color-toggle-fondo: #E8C766;
  --color-fondo: #101A0C;
  --color-superficie: #182312;
  --color-superficie-2: #1F2C18;
  --color-borde: #2C3A24;
  --color-borde-suave: #24301C;
  --color-borde-control: #839473;
  --color-texto: #E7E3D6;
  --color-texto-tenue: #9AA18E;

  --color-marca: #5C8C50;
  --color-marca-texto: #7DAE6E;
  --color-marca-fondo: #20351A;

  --color-accion: #D2882C;
  --color-accion-texto: #101A0C;
  --color-accion-hover: #EBA345;

  --color-enlace: #EBA345;
  --color-enlace-hover: #F2BD57;

  --color-atencion: #EBA345;
  --color-atencion-fondo: #2E2210;
  --color-peligro: #E0796B;
  --color-peligro-fondo: #2A1A16;
  --color-afirmacion: #C3B1DB;
  --color-afirmacion-fondo: #241A33;

  /* El papel no sigue el tema: un documento es marfil también de noche. */
  --color-papel: #FFFEF9;
  --color-papel-tinta: #191712;
  --color-papel-acento: #805010;
  --color-papel-seleccion: #F2D59D;
  --color-papel-hover: #FFF7E8;
  --color-papel-borde: #BBB3A2;

  --color-foco: #7DAE6E;
  --color-velo: rgba(0, 0, 0, .55);
  --color-sombra: rgba(0, 0, 0, .55);
  --color-sombra-suave: rgba(0, 0, 0, .4);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
  }
}