/* TruOpus v2 — generado desde tokens.json. No editar a mano. */

:root {
  --blanco: #ffffff;
  --navy: #071a4a;
  --violeta: #5b25ff;
  --violeta-claro: #7c4dff;
  --violeta-tinta: #b4a0ff;
  --cian: #05bdf4;
  --teal: #00d8d0;
  --teal-tinta: #00706c;
  --navy-800: #0c2560;
  --navy-700: #123075;
  --navy-600: #1b3c86;
  --navy-400: #4a6ba8;
  --navy-300: #a9bbdc;
  --gris-600: #4a5c80;
  --gris-400: #6e7f9e;
  --gris-200: #e4eaf3;
  --gris-050: #f7f9fc;
  --violeta-tenue: #f1ecff;
  --teal-tenue: #e8faf9;
  --violeta-honda: #1e1550;
  --teal-hondo: #06303f;
  --fondo: var(--blanco);
  --superficie: var(--gris-050);
  --superficie-alta: var(--blanco);
  --borde: var(--gris-200);
  --borde-control: var(--gris-400);
  --texto: var(--navy);
  --texto-tenue: var(--gris-600);
  --marca: var(--violeta);
  --marca-solida: #5b25ff;
  --marca-tenue: var(--violeta-tenue);
  --lado-compra: var(--violeta);
  --lado-compra-texto: var(--violeta);
  --lado-compra-tenue: var(--violeta-tenue);
  --lado-construye: var(--teal);
  --lado-construye-texto: var(--teal-tinta);
  --lado-construye-tenue: var(--teal-tenue);
  --ok: #0f7a57;
  --aviso: #8a5b00;
  --alerta: #b21f2d;
  --foco: var(--violeta);

  --sombra-sm: 0 1px 2px rgba(7, 26, 74, 0.08);
  --sombra-md: 0 8px 24px rgba(7, 26, 74, 0.14);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) {
    --fondo: var(--navy);
    --superficie: var(--navy-800);
    --superficie-alta: var(--navy-700);
    --borde: var(--navy-600);
    --borde-control: var(--navy-400);
    --texto: var(--blanco);
    --texto-tenue: var(--navy-300);
    --marca: var(--violeta-tinta);
    --marca-tenue: var(--violeta-honda);
    --lado-compra: var(--violeta-claro);
    --lado-compra-texto: var(--violeta-tinta);
    --lado-compra-tenue: var(--violeta-honda);
    --lado-construye: var(--teal);
    --lado-construye-texto: var(--teal);
    --lado-construye-tenue: var(--teal-hondo);
    --ok: #35c08d;
    --aviso: #e0a93a;
    --alerta: #f0796f;
    --foco: var(--teal);

    --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --sombra-md: 0 8px 24px rgba(0, 0, 0, 0.6);

    color-scheme: dark;
  }
}

[data-theme="oscuro"] {
  --fondo: var(--navy);
  --superficie: var(--navy-800);
  --superficie-alta: var(--navy-700);
  --borde: var(--navy-600);
  --borde-control: var(--navy-400);
  --texto: var(--blanco);
  --texto-tenue: var(--navy-300);
  --marca: var(--violeta-tinta);
  --marca-tenue: var(--violeta-honda);
  --lado-compra: var(--violeta-claro);
  --lado-compra-texto: var(--violeta-tinta);
  --lado-compra-tenue: var(--violeta-honda);
  --lado-construye: var(--teal);
  --lado-construye-texto: var(--teal);
  --lado-construye-tenue: var(--teal-hondo);
  --ok: #35c08d;
  --aviso: #e0a93a;
  --alerta: #f0796f;
  --foco: var(--teal);

  --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --sombra-md: 0 8px 24px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radio-0: 0;
  --radio-sm: 3px;
  --radio-md: 6px;
  --radio-lg: 10px;
  --radio-pill: 999px;
  --font-sans: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.display-xl {
  font-family: var(--font-sans);
  font-size: 56px;
  line-height: 56px;
  font-weight: 700;
  letter-spacing: -0.022em;
}

.display-l {
  font-family: var(--font-sans);
  font-size: 40px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: -0.018em;
}

.display-m {
  font-family: var(--font-sans);
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.titulo {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
}

.subtitulo {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
}

.cuerpo {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}

.cuerpo-s {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
}

.etiqueta {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.cifra {
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.dato {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.codigo {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}