/* ============================================================
   variables.css — Custom Properties globales
   Descentralizados
   ============================================================ */

:root {

  /* ── Colores ─────────────────────────────────────────────── */
  --color-black:  #19181a;   /* fondo oscuro principal         */
  --color-gray:   #dadada;   /* fondo secciones alternas       */
  --color-white:  #e7e7e7;   /* texto sobre oscuro / fondo claro */
  --color-accent: #f76e47;   /* naranja del logotipo           */
  --color-blue:   #5C939F;   /* acento azul — Fórmula          */

  /* Variantes de opacidad */
  --color-black-80: rgba(25, 24, 26, 0.80);
  --color-white-60: rgba(231, 231, 231, 0.60);
  --color-white-30: rgba(231, 231, 231, 0.30);
  --color-white-10: rgba(231, 231, 231, 0.10);

  /* ── Tipografía ─────────────────────────────────────────── */
  --font-sans:  'Space Grotesk', sans-serif;
  --font-mono:  'Geist Mono', 'JetBrains Mono', monospace;

  /* Tamaños */
  --text-h1:    clamp(2.5rem, 5vw, 3.75rem);   /* 40–60px     */
  --text-h2:    1.875rem;                        /* 30px        */
  --text-body:  1.3125rem;                       /* 21px        */
  --text-label: 0.75rem;                         /* 12px        */
  --text-small: 0.875rem;                        /* 14px        */

  /* Pesos */
  --weight-regular:   400;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* Line-heights */
  --leading-tight:  1.15;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  /* Letter-spacing */
  --tracking-label: 0.1em;
  --tracking-wide:  0.05em;

  /* ── Espaciado ───────────────────────────────────────────── */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ── Layout ─────────────────────────────────────────────── */
  --container-max:   1280px;
  --container-pad:   clamp(1.25rem, 4vw, 3rem);
  --nav-height:      72px;
  --section-pad-v:   clamp(6rem, 10vw, 10rem);

  /* ── Bordes ──────────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;

  /* ── Transiciones ────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   600ms;
  --duration-xslow:  900ms;

  /* ── Sombras ─────────────────────────────────────────────── */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.18);
  --shadow-md:  0 4px 24px rgba(0,0,0,0.28);
  --shadow-lg:  0 8px 48px rgba(0,0,0,0.40);
}