:root {
/* =======================================================
   1️⃣ BRAND TOKENS (COLORES BASE - NO SE USAN DIRECTO)
======================================================= */

  --primary: #012138;
  --primary-rgb: 1, 33, 56;

  --accent: #DEA87A;
  --accent-rgb: 222, 168, 122;
  --accent-dark: #7a5a3a;
  --neutral-main: #A9AFB2;

  /* ===== CONTRASTES ===== */
  --contrast-olive: #60634D;
  --contrast-gray: #62635E;
  --contrast-blue: #344D60;

  /* ===== FONDEOS ===== */
  --bg-cream: #FCF0D2;
  --bg-soft: #D5D7CB;
  --bg-light: #E6E9EB;

  /* ===== BASE ===== */
  --white: #ffffff;


/* =======================================================
   2️⃣ SEMANTIC COLORS
======================================================= */

  --text-primary: var(--primary);
  --text-secondary: var(--contrast-gray);
  --text-light: var(--neutral-main);
  --text-muted: var(--neutral-main);
  --text-inverse: var(--white);

  --surface-primary: var(--white);
  --surface-alt: var(--bg-light);
  --surface-cream: var(--bg-cream);
  --surface-soft: var(--bg-soft);
  --surface-dark: var(--primary);
  --surface-dark-rgb: var(--primary-rgb);

  --border-light: #e2e6ea;
  --border: var(--border-light);
  --border-medium: var(--neutral-main);

  --action-primary: var(--accent);


/* =======================================================
   3️⃣ OVERLAYS
======================================================= */

  --overlay-80: rgba(var(--primary-rgb), 0.8);
  --overlay-60: rgba(var(--primary-rgb), 0.6);
  --overlay-50: rgba(var(--primary-rgb), 0.5);
  --overlay-30: rgba(var(--primary-rgb), 0.3);


/* =======================================================
   4️⃣ STATES
======================================================= */

  --primary-hover: #033354;
  --accent-hover: #c99664;

  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 15px 40px rgba(0, 0, 0, 0.12);


/* =======================================================
   5️⃣ LAYOUT SYSTEM
======================================================= */

  --header-height: 4.5rem;

  --container-base: 75rem;
  --container-wide: 87.5rem;
  --container-narrow: 62rem;
  --container-narrows: 80rem;
  --container-max: var(--container-base);

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 2rem;


/* =======================================================
   6️⃣ TYPOGRAPHY SYSTEM
======================================================= */

  --font-base: 'Montserrat', sans-serif;

  --text-xs: clamp(0.75rem, 0.7vw, 0.8rem);
  --text-sm: clamp(0.875rem, 0.85vw, 0.95rem);
  --text-base: clamp(1rem, 1vw, 1.1rem);
  --text-lg: clamp(1.125rem, 1.3vw, 1.25rem);
  --text-xl: clamp(1.35rem, 1.8vw, 1.6rem);
  --text-2xl: clamp(1.8rem, 2.5vw, 2.2rem);
  --text-3xl: clamp(2.2rem, 3.5vw, 3rem);
  --text-4xl: clamp(2.8rem, 4.5vw, 3.8rem);
  --text-hero: clamp(2.6rem, 5vw, 4.8rem);

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;
  --tracking-ultra: 0.25em;

  --heading-1-size: var(--text-hero);
  --heading-2-size: var(--text-3xl);
  --heading-3-size: var(--text-2xl);
  --heading-4-size: var(--text-xl);


/* =======================================================
   7️⃣ MOTION SYSTEM
======================================================= */

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);

  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;


/* =======================================================
   8️⃣ SPACING SYSTEM
======================================================= */

  --space-0: 0;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;
  --space-10: 6rem;
  --space-12: 8rem;


/* =======================================================
   9️⃣ SECTION RHYTHM
======================================================= */

  --section-padding-desktop: var(--space-7);
  --section-padding-tablet: var(--space-6);
  --section-padding-mobile: var(--space-5);

  --section-padding-hero-desktop: var(--space-8);
  --section-padding-hero-tablet: var(--space-7);
  --section-padding-hero-mobile: var(--space-6);

  --section-padding-tight-desktop: var(--space-5);
  --section-padding-tight-tablet: var(--space-4);
  --section-padding-tight-mobile: var(--space-3);


/* =======================================================
   🔟 GRID + CONTAINER
======================================================= */

  --gap-xs: var(--space-1);
  --gap-sm: var(--space-2);
  --gap-md: var(--space-3);
  --gap-lg: var(--space-4);
  --gap-xl: var(--space-5);

  --gap-desktop: var(--space-6);
  --gap-tablet: var(--space-5);
  --gap-mobile: var(--space-4);

  --container-padding: var(--space-3);

  /* Services Layout Tokens */
  --services-media-ratio: 3fr;
  --services-content-ratio: 2fr;
  --services-media-max-width: 56.25rem;
  --services-media-aspect-w: 16;
  --services-media-aspect-h: 9;
  --services-bar-height: 3.75rem;
  --services-bar-offset: var(--space-8);


/* =======================================================
   BREAKPOINTS (para referencia en media queries)
======================================================= */

  --bp-mobile: 30rem;   /* 480px */
  --bp-mobile-lg: 40rem; /* 640px */
  --bp-tablet: 48rem;    /* 768px */
  --bp-desktop: 64rem;   /* 1024px */
  --bp-desktop-lg: 75rem; /* 1200px */
}