/*
  Tokens visuales de la Landing Maestra D Cocinas & Closets.
  Fuente de verdad: CSS del prototipo funcional de OT-009 (dirección visual
  efectivamente aprobada), con el color de acento y contrastes ya validados
  en OT-011 (gris oxford #3B3E45 — 10.71:1 / 10.10:1).
*/

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-400-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../assets/fonts/plusjakartasans-latin-600-700.woff2') format('woff2');
}

:root {
  /* Color */
  --color-bg-base: #FAF8F5;
  --color-bg-alt: #EFEDE9;
  --color-text-primary: #2B2B2B;
  --color-text-strong: #171717;
  --color-accent: #3B3E45;
  --color-accent-dark: #24262A;
  --color-accent-soft: rgba(59, 62, 69, 0.07);
  --color-wood: #A9754F;
  --color-gray-light: #ABB0B6;
  --color-success: #2F6B52;
  --color-error: #C4291C;
  --color-white: #FFFFFF;
  --color-hairline: rgba(43, 43, 43, 0.10);
  --color-overlay: rgba(23, 23, 23, 0.6);

  /* Tipografía */
  --font-heading: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

  --type-h1: 700 40px/1.15 var(--font-heading);
  --type-h2: 700 32px/1.2 var(--font-heading);
  --type-h3: 600 24px/1.25 var(--font-heading);
  --type-h4: 600 20px/1.3 var(--font-heading);
  --type-body-lg: 400 18px/1.6 var(--font-body);
  --type-body: 400 16px/1.6 var(--font-body);
  --type-small: 500 14px/1.5 var(--font-body);
  --type-caption: 400 12px/1.5 var(--font-body);

  /* Espaciado (base 8px) */
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 40px;
  --space-xxl: 64px;

  /* Radios */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(43, 25, 15, 0.06);
  --shadow-md: 0 4px 16px rgba(43, 25, 15, 0.10);
  --shadow-lg: 0 12px 32px rgba(43, 25, 15, 0.16);

  /* Movimiento */
  --motion-fast: 150ms ease-out;
  --motion-standard: 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --motion-panel: 380ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Layout */
  --container-max: 1200px;
  --container-pad: var(--space-l);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 1ms linear;
    --motion-standard: 1ms linear;
    --motion-panel: 1ms linear;
  }
}