/* =====================================================
   COLORES
===================================================== */

/* Brand */

--color-primary: #E57200;

--color-primary-hover: #C86100;

--color-secondary: #1D1F2A;

--color-accent: #EFD19F;


/* Neutral */

--color-white: #FFFFFF;

--color-background: #FAFAFA;

--color-surface: #F5F5F5;

--color-border: #E5E7EB;


/* Text */

--color-text: #1D1F2A;

--color-text-light: #919D9D;

--color-text-white: #FFFFFF;


/* Feedback (preparados para el futuro) */

--color-success: #22C55E;

--color-warning: #F59E0B;

--color-error: #DC2626;

--color-info: #3B82F6;

/* =====================================================
   TYPOGRAPHY
===================================================== */

/* Font Families */

--font-heading: "Montserrat", sans-serif;

--font-body: "Montserrat", sans-serif;

--font-brand: "LEMON MILK", sans-serif;


/* Font Weights */

--font-light: 300;

--font-regular: 400;

--font-medium: 500;

--font-semibold: 600;

--font-bold: 700;

--font-extrabold: 800;

/* Desktop */

--font-size-display: 80px;

--font-size-h1: 72px;

--font-size-h2: 56px;

--font-size-h3: 40px;

--font-size-h4: 32px;

--font-size-h5: 24px;

--font-size-h6: 20px;

--font-size-body-lg: 20px;

--font-size-body: 18px;

--font-size-small: 16px;

--font-size-caption: 14px;

--line-height-tight: 1.1;

--line-height-heading: 1.2;

--line-height-body: 1.7;

--line-height-loose: 1.9;

/* =====================================================
   SPACING
===================================================== */

--space-0: 0;

--space-xs: 8px;

--space-sm: 16px;

--space-md: 24px;

--space-lg: 32px;

--space-xl: 48px;

--space-2xl: 64px;

--space-3xl: 96px;

--space-4xl: 128px;

--space-5xl: 160px;

/* =====================================================
   BORDER RADIUS
===================================================== */

--radius-none: 0;

--radius-sm: 8px;

--radius-md: 12px;

--radius-lg: 16px;

--radius-xl: 24px;

--radius-full: 999px;

/* =====================================================
   SHADOWS
===================================================== */

--shadow-sm: 0 2px 8px rgba(0,0,0,.05);

--shadow-md: 0 8px 24px rgba(0,0,0,.08);

--shadow-lg: 0 16px 48px rgba(0,0,0,.12);

/* =====================================================
   LAYOUT
===================================================== */

--container-sm: 768px;

--container-md: 1024px;

--container-lg: 1280px;

--container-xl: 1440px;

--content-width: 760px;

/* =====================================================
   BREAKPOINTS
===================================================== */

--breakpoint-mobile: 767px;

--breakpoint-tablet: 980px;

--breakpoint-desktop: 1280px;

--breakpoint-wide: 1440px;