/* Orden de capas: lo que viene después gana siempre, sin pelear por especificidad. */
@layer reset, tokens, base, components, screens;

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Paleta clara: valor por defecto. Los dos modos salen del Director de Arte (22/10/2026). */
    --acero: #ECEEF0;
    --superficie: #FFFFFF;
    --tinta: #14181C;
    --tinta-suave: #4B5560;
    --brasa: #B93C09;
    --alerta: #A8124A;
    --sobre-brasa: #FFFFFF;
    --templada: #F5E4DD;
    --cal-1: #F1D8CE;
    --cal-2: #E3B19D;
    --cal-3: #B93C09;
    --velo: rgba(20, 24, 28, 0.45);

    --fuente-display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
    --fuente-texto: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    --radius-campo: 8px;
    --radius-boton: 14px;
    --radius-hoja: 24px;

    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --dur-micro: 120ms;
    --dur-estandar: 220ms;
    --dur-dramatica: 800ms;
    --dur-hoja: 280ms;
  }

  /* El modo oscuro redefine solo los tokens que cambian. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --acero: #1B1F23;
      --superficie: #262B31;
      --tinta: #EEF0F2;
      --tinta-suave: #A7B0B9;
      --brasa: #FF7A33;
      --alerta: #FF8FAE;
      --sobre-brasa: #1B1F23;
      --templada: #493831;
      --cal-1: #513B31;
      --cal-2: #7D4B32;
      --cal-3: #FF7A33;
      --velo: rgba(0, 0, 0, 0.6);
    }
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --acero: #1B1F23;
    --superficie: #262B31;
    --tinta: #EEF0F2;
    --tinta-suave: #A7B0B9;
    --brasa: #FF7A33;
    --alerta: #FF8FAE;
    --sobre-brasa: #1B1F23;
    --templada: #493831;
    --cal-1: #513B31;
    --cal-2: #7D4B32;
    --cal-3: #FF7A33;
    --velo: rgba(0, 0, 0, 0.6);
  }

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