/**
 * AM PROYECTOS Y REMODELACIONES
 * Design Tokens & Visual Variables
 */

:root {
  /* Paleta Estricta Oficial */
  --color-black-main: #111318;
  --color-black-secondary: #191B20;
  --color-black-surface: #1E2128;
  --color-coral: #F05B4F;
  --color-coral-hover: #DB493D;
  --color-coral-subtle: rgba(240, 91, 79, 0.12);
  --color-grey: #6B7280;
  --color-grey-light: #9CA3AF;
  --color-light-bg: #F8F9FA;
  --color-light-grey: #F3F4F6;
  --color-line-grey: #D1D5DB;
  --color-line-dark: rgba(255, 255, 255, 0.12);
  --color-line-subtle: rgba(0, 0, 0, 0.08);
  --color-white: #FFFFFF;

  /* Tipografía */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Espaciado y Contenedor */
  --max-width: 1440px;
  --max-width-narrow: 1120px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --header-height: 84px;

  /* Transiciones y Micro-animaciones (200ms - 600ms) */
  --transition-fast: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 300ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 500ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Sombras y Elevaciones Arquitectónicas */
  --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-dark: 0 20px 40px rgba(0, 0, 0, 0.4);
}