/* OBBI — Design tokens
   Paleta blanco y negro (estilo Henk / Noo.ma): el color lo aportan las fotos.
   Único acento de color reservado para el precio en efectivo. */

@font-face {
  font-family: "PP Agrandir";
  src: url("../assets/fonts/PPAgrandir-WideLight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Victor Mono";
  src: url("../assets/fonts/VictorMono-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Victor Mono";
  src: url("../assets/fonts/VictorMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* === Color === */
  --color-black: #111111;
  --color-white: #ffffff;
  --color-gray-100: #f4f4f3; /* fondo sutil */
  --color-gray-300: #d8d6d3; /* borde */
  --color-gray-600: #767370; /* texto secundario */
  --color-accent: #b0231e; /* precio en efectivo */

  --color-bg: var(--color-white);
  --color-text: var(--color-black);
  --color-text-secondary: var(--color-gray-600);
  --color-border: var(--color-gray-300);
  --color-surface: var(--color-gray-100);

  /* === Tipografía === */
  --font-display: "PP Agrandir", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Victor Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-xs: 0.75rem; /* 12px */
  --fs-sm: 0.875rem; /* 14px */
  --fs-base: 1rem; /* 16px */
  --fs-md: 1.25rem; /* 20px */
  --fs-lg: 1.75rem; /* 28px */
  --fs-xl: 2.5rem; /* 40px */
  --fs-2xl: 3.5rem; /* 56px */
  --fs-3xl: 5rem; /* 80px */

  --lh-tight: 1.05;
  --lh-normal: 1.4;
  --lh-relaxed: 1.6;

  /* === Espaciado (escala base 4px) === */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.5rem; /* 24px */
  --space-6: 2rem; /* 32px */
  --space-7: 3rem; /* 48px */
  --space-8: 4rem; /* 64px */
  --space-9: 6rem; /* 96px */
  --space-10: 8rem; /* 128px */

  /* === Radios === */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* === Breakpoints (referencia, usar en media queries) ===
     --bp-sm: 480px;
     --bp-md: 768px;
     --bp-lg: 1024px;
     --bp-xl: 1280px */

  /* === Transiciones === */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
}