/*
  Tokens de diseño de Urban House.
  Carbón + verde lima. Esquinas rectas en todo el sitio (radio 0), sin excepciones.
  Titulares: Archivo (variable, eje de ancho condensado). Texto: Geist. Ambas se sirven desde css/fonts/.
  El verde lima marca acción, selección y foco. En modo claro, el texto con acento usa --accent-text.
*/

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Superficies */
  --bg: #0d0d0c;
  --bg-2: #131312;
  --surface: #1a1a18;
  --raise: #242421;
  --line: #2c2c29;
  --line-2: #42423d;
  --scrim: rgb(6 6 5 / .72);

  /* Texto */
  --text: #f0efe9;
  --muted: #a3a29a;

  /* Acento */
  --accent: #b7ff2e;
  --accent-hover: #cbff66;
  --accent-ink: #0d1300;
  --accent-text: #b7ff2e;

  /* Estado */
  --error: #ff8a7a;
  --ok: #b7ff2e;

  /* Tipografía */
  --f-display: "Archivo", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Geist", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Espacio y ritmo */
  --gutter: 16px;
  --wrap: 1440px;
  --header-h: 64px;
  --section-y: clamp(72px, 10vw, 144px);

  /* Movimiento */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .16s;
  --t: .38s;

  /* Capas: encabezado, panel lateral, avisos */
  --z-header: 30;
  --z-toast: 60;
}

/* Modo claro: mismos nombres, otros valores. Se activa con data-theme="light" (ver js/tema.js). */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f3ee;
  --bg-2: #eceae3;
  --surface: #fbfbf8;
  --raise: #e5e3dc;
  --line: #d9d7cf;
  --line-2: #b9b7ad;
  --scrim: rgb(20 20 18 / .5);
  --text: #141412;
  --muted: #5b5a53;
  --accent-text: #3d6300;
  --error: #b3261e;
  --ok: #3d6300;
}

/* Sin JavaScript: respeta la preferencia del sistema */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #f4f3ee;
    --bg-2: #eceae3;
    --surface: #fbfbf8;
    --raise: #e5e3dc;
    --line: #d9d7cf;
    --line-2: #b9b7ad;
    --scrim: rgb(20 20 18 / .5);
    --text: #141412;
    --muted: #5b5a53;
    --accent-text: #3d6300;
    --error: #b3261e;
    --ok: #3d6300;
  }
}

@media (min-width: 700px) { :root { --gutter: 28px; --header-h: 72px; } }
@media (min-width: 1200px) { :root { --gutter: 44px; } }