/* Tornillo Suelto · tokens v1.0 */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Martian+Mono:wght@400;600&display=swap");

:root {
  /* Base */
  --ts-papel: #F7F5F1;
  --ts-superficie: #E9E6DE;
  --ts-elevado: #FCFBF8;
  --ts-borde: #D9D5CB;
  --ts-tinta: #151513;
  --ts-tinta-2: #46474A;
  --ts-tinta-3: #65676A;
  --ts-linea: #151513;

  /* Acentos: detalle (contornos, puntos, gráficos) */
  --ts-rojo: #E63946;
  --ts-ambar: #F2A516;
  --ts-verde: #1FA36B;
  --ts-azul: #2F5BEA;
  --ts-lila: #A27BE0;

  /* Acentos: texto (AA sobre papel) */
  --ts-rojo-texto: #B3202C;
  --ts-ambar-texto: #8A5A00;
  --ts-verde-texto: #0B6B42;
  --ts-azul-texto: #2445B8;
  --ts-lila-texto: #6A45B0;

  /* Tipografía */
  --ts-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ts-font-texto: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ts-font-mono: "Martian Mono", ui-monospace, Menlo, monospace;
  --ts-t-xs: 0.75rem;  --ts-t-sm: 0.875rem; --ts-t-md: 1rem;
  --ts-t-lg: 1.25rem;  --ts-t-xl: 1.563rem; --ts-t-2xl: 1.953rem;
  --ts-t-3xl: 2.441rem; --ts-t-4xl: 3.815rem;

  /* Espacio y forma */
  --ts-e-1: 4px; --ts-e-2: 8px; --ts-e-3: 12px; --ts-e-4: 16px;
  --ts-e-6: 24px; --ts-e-8: 32px; --ts-e-12: 48px; --ts-e-16: 64px;
  --ts-r-1: 2px; --ts-r-2: 6px; --ts-r-boton: 10px; --ts-r-pill: 999px;
  --ts-grosor-raya: 2px;
  --ts-borde-fino: 1px;
  --ts-borde-acento: 3px;

  /* Movimiento */
  --ts-mov-rapido: 120ms; --ts-mov-base: 200ms; --ts-curva: cubic-bezier(.2, .7, .3, 1);

  /* Capas: modal, toast, menú */
  --ts-velo: rgba(21, 21, 19, 0.32);
  --ts-sombra: 0 1px 2px rgba(21, 21, 19, 0.06), 0 12px 32px rgba(21, 21, 19, 0.10);
}

/* Modo oscuro según el sistema */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ts-papel: #0F1112; --ts-superficie: #181B1D; --ts-elevado: #1C1F22; --ts-borde: #2B2F33;
    --ts-tinta: #F3F4F4; --ts-tinta-2: #BCC1C5; --ts-tinta-3: #8C9297;
    --ts-linea: #F3F4F4;
    --ts-rojo: #FF5C68; --ts-ambar: #FFC23D; --ts-verde: #3DD68C;
    --ts-azul: #7390FF; --ts-lila: #C3A3FF;
    --ts-rojo-texto: #FF7A84; --ts-ambar-texto: #FFC857; --ts-verde-texto: #52DC9A;
    --ts-azul-texto: #8FA6FF; --ts-lila-texto: #CDB3FF;
    --ts-velo: rgba(0, 0, 0, 0.6);
    --ts-sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

/* Modo oscuro forzado con data-theme="dark" en <html> */
:root[data-theme="dark"] {
  --ts-papel: #0F1112; --ts-superficie: #181B1D; --ts-elevado: #1C1F22; --ts-borde: #2B2F33;
  --ts-tinta: #F3F4F4; --ts-tinta-2: #BCC1C5; --ts-tinta-3: #8C9297;
  --ts-linea: #F3F4F4;
  --ts-rojo: #FF5C68; --ts-ambar: #FFC23D; --ts-verde: #3DD68C;
  --ts-azul: #7390FF; --ts-lila: #C3A3FF;
  --ts-rojo-texto: #FF7A84; --ts-ambar-texto: #FFC857; --ts-verde-texto: #52DC9A;
  --ts-azul-texto: #8FA6FF; --ts-lila-texto: #CDB3FF;
  --ts-velo: rgba(0, 0, 0, 0.6);
  --ts-sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* Base: lo que tiene hidden no se ve, aunque un componente defina display */
[hidden] { display: none !important; }

/* Foco: una línea fina en tinta, separada 2 px. Los campos solo cambian su borde a tinta. */
:focus-visible { outline: 1px solid var(--ts-tinta); outline-offset: 2px; }

/* Línea divisoria */
.ts-linea { height: var(--ts-borde-fino); background: var(--ts-linea); }

/* Color en detalles: contornos completos; el color entra por --c (style="--c: var(--ts-verde)") */
.ts-borde-color { border: var(--ts-borde-fino) solid var(--c, var(--ts-tinta)); }
.ts-doble-contorno { border: var(--ts-borde-fino) solid var(--c, var(--ts-tinta)); outline: var(--ts-borde-fino) solid var(--c, var(--ts-tinta)); outline-offset: 3px; }
.ts-subrayado { text-decoration: underline; text-decoration-color: var(--c, var(--ts-azul));
  text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ts-marca-titulo::after { content: ""; display: block; width: 32px;
  height: var(--ts-borde-acento); background: var(--c, var(--ts-tinta)); margin-top: 10px; }
.ts-anillo { box-shadow: 0 0 0 2px var(--ts-papel), 0 0 0 4px var(--c, var(--ts-tinta)); }