:root {
  --fuente: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --t-11: 0.6875rem;
  --t-12: 0.75rem;
  --t-13: 0.8125rem;
  --t-14: 0.875rem;
  --t-15: 0.9375rem;
  --t-17: 1.0625rem;
  --t-20: 1.25rem;
  --t-26: 1.625rem;
  --t-34: 2.125rem;
  --t-44: 2.75rem;

  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.25rem;
  --e-6: 1.5rem;
  --e-8: 2rem;
  --e-10: 2.5rem;
  --e-12: 3rem;

  --r-1: 4px;
  --r-2: 6px;
  --r-3: 8px;

  --fila: 52px;
  --control: 40px;
  --barra-ancho: 248px;
  --superior-alto: 56px;

  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
  --rapido: 120ms;
  --medio: 220ms;

  --fondo: oklch(0.972 0.009 80);
  --superficie: oklch(0.993 0.004 80);
  --superficie-2: oklch(0.955 0.011 80);
  --superficie-3: oklch(0.93 0.013 80);
  --hundido: oklch(0.948 0.01 80);
  --borde: oklch(0.885 0.012 80);
  --borde-suave: oklch(0.925 0.01 80);
  --borde-fuerte: oklch(0.78 0.016 80);

  --texto: oklch(0.235 0.018 245);
  --texto-2: oklch(0.43 0.018 245);
  --texto-3: oklch(0.57 0.014 245);
  --texto-invertido: oklch(0.985 0.005 80);

  --marca: oklch(0.44 0.075 218);
  --marca-hover: oklch(0.39 0.075 218);
  --marca-presion: oklch(0.35 0.07 218);
  --marca-suave: oklch(0.94 0.022 218);
  --marca-texto: oklch(0.4 0.075 218);
  --sobre-marca: oklch(0.985 0.005 80);
  --foco: oklch(0.6 0.12 218);

  --listo: oklch(0.52 0.12 152);
  --listo-suave: oklch(0.945 0.04 152);
  --listo-borde: oklch(0.85 0.07 152);
  --atencion: oklch(0.47 0.1 68);
  --atencion-punto: oklch(0.76 0.15 78);
  --atencion-suave: oklch(0.96 0.05 88);
  --atencion-borde: oklch(0.86 0.09 85);
  --bloqueado: oklch(0.5 0.17 27);
  --bloqueado-suave: oklch(0.955 0.03 25);
  --bloqueado-borde: oklch(0.86 0.07 25);
  --info: var(--marca-texto);
  --info-suave: var(--marca-suave);
  --info-borde: oklch(0.85 0.04 218);

  --tinta: oklch(0.215 0.022 230);
  --tinta-2: oklch(0.255 0.022 230);
  --tinta-borde: oklch(0.32 0.02 230);
  --tinta-texto: oklch(0.93 0.008 80);
  --tinta-texto-2: oklch(0.72 0.012 230);

  --sombra-1: 0 1px 0 oklch(0.2 0.02 80 / 0.04);
  --sombra-2: 0 1px 2px oklch(0.2 0.02 80 / 0.06), 0 4px 12px oklch(0.2 0.02 80 / 0.05);
  --sombra-3: 0 12px 40px oklch(0.2 0.03 240 / 0.18), 0 2px 8px oklch(0.2 0.03 240 / 0.08);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: oklch(0.175 0.01 235);
    --superficie: oklch(0.205 0.011 235);
    --superficie-2: oklch(0.235 0.012 235);
    --superficie-3: oklch(0.265 0.013 235);
    --hundido: oklch(0.19 0.01 235);
    --borde: oklch(0.31 0.012 235);
    --borde-suave: oklch(0.265 0.011 235);
    --borde-fuerte: oklch(0.4 0.014 235);
    --texto: oklch(0.935 0.007 80);
    --texto-2: oklch(0.77 0.01 235);
    --texto-3: oklch(0.62 0.012 235);
    --texto-invertido: oklch(0.2 0.01 235);
    --marca: oklch(0.7 0.085 212);
    --marca-hover: oklch(0.75 0.085 212);
    --marca-presion: oklch(0.66 0.085 212);
    --marca-suave: oklch(0.29 0.04 218);
    --marca-texto: oklch(0.78 0.08 212);
    --sobre-marca: oklch(0.18 0.02 230);
    --foco: oklch(0.72 0.1 212);
    --listo: oklch(0.78 0.13 152);
    --listo-suave: oklch(0.29 0.05 152);
    --listo-borde: oklch(0.4 0.07 152);
    --atencion: oklch(0.84 0.12 85);
    --atencion-punto: oklch(0.8 0.15 80);
    --atencion-suave: oklch(0.3 0.05 80);
    --atencion-borde: oklch(0.42 0.07 80);
    --bloqueado: oklch(0.76 0.13 25);
    --bloqueado-suave: oklch(0.29 0.06 25);
    --bloqueado-borde: oklch(0.42 0.09 25);
    --info-borde: oklch(0.4 0.05 218);
    --tinta: oklch(0.225 0.016 235);
    --tinta-2: oklch(0.26 0.016 235);
    --tinta-borde: oklch(0.34 0.016 235);
    --sombra-1: 0 1px 0 oklch(0 0 0 / 0.2);
    --sombra-2: 0 1px 2px oklch(0 0 0 / 0.3), 0 4px 12px oklch(0 0 0 / 0.25);
    --sombra-3: 0 16px 48px oklch(0 0 0 / 0.5), 0 2px 8px oklch(0 0 0 / 0.3);
    color-scheme: dark;
  }
}

:root[data-tema="oscuro"] {
  --fondo: oklch(0.175 0.01 235);
  --superficie: oklch(0.205 0.011 235);
  --superficie-2: oklch(0.235 0.012 235);
  --superficie-3: oklch(0.265 0.013 235);
  --hundido: oklch(0.19 0.01 235);
  --borde: oklch(0.31 0.012 235);
  --borde-suave: oklch(0.265 0.011 235);
  --borde-fuerte: oklch(0.4 0.014 235);
  --texto: oklch(0.935 0.007 80);
  --texto-2: oklch(0.77 0.01 235);
  --texto-3: oklch(0.62 0.012 235);
  --texto-invertido: oklch(0.2 0.01 235);
  --marca: oklch(0.7 0.085 212);
  --marca-hover: oklch(0.75 0.085 212);
  --marca-presion: oklch(0.66 0.085 212);
  --marca-suave: oklch(0.29 0.04 218);
  --marca-texto: oklch(0.78 0.08 212);
  --sobre-marca: oklch(0.18 0.02 230);
  --foco: oklch(0.72 0.1 212);
  --listo: oklch(0.78 0.13 152);
  --listo-suave: oklch(0.29 0.05 152);
  --listo-borde: oklch(0.4 0.07 152);
  --atencion: oklch(0.84 0.12 85);
  --atencion-punto: oklch(0.8 0.15 80);
  --atencion-suave: oklch(0.3 0.05 80);
  --atencion-borde: oklch(0.42 0.07 80);
  --bloqueado: oklch(0.76 0.13 25);
  --bloqueado-suave: oklch(0.29 0.06 25);
  --bloqueado-borde: oklch(0.42 0.09 25);
  --info-borde: oklch(0.4 0.05 218);
  --tinta: oklch(0.225 0.016 235);
  --tinta-2: oklch(0.26 0.016 235);
  --tinta-borde: oklch(0.34 0.016 235);
  --sombra-1: 0 1px 0 oklch(0 0 0 / 0.2);
  --sombra-2: 0 1px 2px oklch(0 0 0 / 0.3), 0 4px 12px oklch(0 0 0 / 0.25);
  --sombra-3: 0 16px 48px oklch(0 0 0 / 0.5), 0 2px 8px oklch(0 0 0 / 0.3);
  color-scheme: dark;
}