/*
  Design tokens del servicio de firma electronica.
  Unica fuente de marca: para cambiar la marca basta con sobrescribir este fichero.
  Paleta AmbarMark (AmbarMark_paleta_web.txt): negro calido para texto y accion,
  crema y blanco para superficies, ambar oscuro para acento, ambar de marca solo decorativo.
*/

/* Modo claro por defecto */
:root {
  color-scheme: light;

  --color-fondo: #FFFBF5;
  --color-superficie: #FFFFFF;
  --color-texto: #181511;
  --color-texto-suave: #44403C;
  --color-accion: #181511;
  --color-accion-texto: #FFFFFF;
  --color-acento: #92400E;
  --color-acento-texto: #FFFFFF;
  --color-marca: #D97706;
  --color-verificado: #0F6B4F;
  --color-error: #B3261E;
  --color-aviso: #7A5600;
  --color-borde: #78716C;
  --color-foco: #92400E;
  --color-foco-halo: #FFFFFF;
}

[data-theme="light"] {
  color-scheme: light;

  --color-fondo: #FFFBF5;
  --color-superficie: #FFFFFF;
  --color-texto: #181511;
  --color-texto-suave: #44403C;
  --color-accion: #181511;
  --color-accion-texto: #FFFFFF;
  --color-acento: #92400E;
  --color-acento-texto: #FFFFFF;
  --color-marca: #D97706;
  --color-verificado: #0F6B4F;
  --color-error: #B3261E;
  --color-aviso: #7A5600;
  --color-borde: #78716C;
  --color-foco: #92400E;
  --color-foco-halo: #FFFFFF;
}

/* Modo oscuro segun preferencia del sistema, salvo que se fuerce el claro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-fondo: #181511;
    --color-superficie: #221E19;
    --color-texto: #FFFBF5;
    --color-texto-suave: #D6D0C7;
    --color-accion: #FFFBF5;
    --color-accion-texto: #181511;
    --color-acento: #F59E0B;
    --color-acento-texto: #181511;
    --color-marca: #D97706;
    --color-verificado: #4ADE9A;
    --color-error: #FF8F85;
    --color-aviso: #F5C451;
    --color-borde: #8F877D;
    --color-foco: #FBBF24;
    --color-foco-halo: #181511;
  }
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-fondo: #181511;
  --color-superficie: #221E19;
  --color-texto: #FFFBF5;
  --color-texto-suave: #D6D0C7;
  --color-accion: #FFFBF5;
  --color-accion-texto: #181511;
  --color-acento: #F59E0B;
  --color-acento-texto: #181511;
  --color-marca: #D97706;
  --color-verificado: #4ADE9A;
  --color-error: #FF8F85;
  --color-aviso: #F5C451;
  --color-borde: #8F877D;
  --color-foco: #FBBF24;
  --color-foco-halo: #181511;
}

/* Tokens que no cambian con el modo */
:root {
  /* Tipografia: solo fuentes del sistema, sin descargas */
  --fuente-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --fuente-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Tamanos de letra en rem para respetar el zoom del usuario */
  --texto-xs: 0.875rem;
  --texto-sm: 1rem;
  --texto-base: 1.125rem;
  --texto-lg: 1.375rem;
  --texto-xl: 1.75rem;
  --texto-2xl: 2.25rem;
  --texto-3xl: 3rem;
  --texto-hero: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);

  --interlineado-texto: 1.6;
  --interlineado-titulo: 1.15;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-fuerte: 700;

  /* Espaciado en escala de 4 px */
  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-5: 1.5rem;
  --espacio-6: 2rem;
  --espacio-7: 3rem;
  --espacio-8: 4rem;
  --espacio-9: 6rem;

  /* Radios */
  --radio-sm: 0.25rem;
  --radio-md: 0.5rem;
  --radio-lg: 1rem;
  --radio-pildora: 999px;

  /* Bordes */
  --grosor-borde: 1px;
  --grosor-borde-fuerte: 2px;

  /* Sombras: decorativas, nunca la unica senal de un limite o un estado */
  --sombra-sm: 0 1px 2px rgb(0 0 0 / 0.08);
  --sombra-md: 0 4px 12px rgb(0 0 0 / 0.10);
  --sombra-lg: 0 12px 32px rgb(0 0 0 / 0.14);

  /* Foco: anillo doble, halo pegado al elemento y anillo de color por fuera */
  --foco-grosor: 3px;
  --foco-halo-grosor: 2px;
  --foco-anillo: 0 0 0 var(--foco-halo-grosor) var(--color-foco-halo),
                 0 0 0 calc(var(--foco-halo-grosor) + var(--foco-grosor)) var(--color-foco);

  /* Tamano minimo de zona pulsable */
  --objetivo-minimo: 44px;

  /* Movimiento */
  --duracion-corta: 150ms;
  --duracion-media: 250ms;
  --curva-estandar: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duracion-corta: 0ms;
    --duracion-media: 0ms;
  }
}