/* ============================================================
   CARVO · Design Tokens
   Fuente de verdad de todo el sistema visual.
   Paleta oficial: Manual de Identidad CARVO V.01 (2026)
   ============================================================ */

:root {
  /* ---------- Color · Marca ---------- */
  --c-black:        #090B0D;   /* Negro técnico (fondos principales) */
  --c-carbon:       #0B0D0A;   /* Negro carbón (manual de identidad) */
  --c-graphite:     #1C1C1C;   /* Grafito (superficies elevadas) */
  --c-graphite-2:   #232624;   /* Grafito claro (bordes, cards hover) */
  --c-white:        #FFFFFF;
  --c-bone:         #F4F6F0;   /* Hueso (fondos claros del manual) */

  --c-green:        #A6CE39;   /* Verde CARVO (acento UI principal) */
  --c-green-dark:   #7FB800;   /* Verde CARVO oficial (ramp manual) */
  --c-green-vivo:   #9DDA00;   /* Verde vivo */
  --c-green-lima:   #C5F21A;   /* Lima */

  /* Degradado oficial del manual (horizontal) */
  --g-brand: linear-gradient(90deg, #7FB800 0%, #9DDA00 50%, #C5F21A 100%);

  /* ---------- Color · Rol ---------- */
  --bg:             var(--c-black);
  --bg-elev:        #101312;
  --bg-card:        #121514;
  --border:         rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.16);
  --border-green:   rgba(166, 206, 57, 0.35);

  --text:           #F2F4F1;
  --text-2:         #A8AFA9;   /* secundario */
  --text-3:         #6C736D;   /* terciario / metadatos */
  --text-on-green:  #0B0D0A;

  --focus-ring:     var(--c-green-lima);

  /* ---------- Tipografía ---------- */
  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-ui:      "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* Escala fluida (clamp): mobile → desktop */
  --fs-display-xl: clamp(2.5rem, 1.2rem + 6.5vw, 6.25rem);    /* Hero */
  --fs-display:    clamp(2.1rem, 1.1rem + 4.6vw, 4.5rem);     /* Section killer */
  --fs-h1:         clamp(1.9rem, 1.2rem + 3vw, 3.25rem);
  --fs-h2:         clamp(1.5rem, 1.05rem + 2vw, 2.25rem);
  --fs-h3:         clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
  --fs-body-lg:    clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  --fs-body:       1rem;
  --fs-small:      0.875rem;
  --fs-micro:      0.75rem;

  --lh-tight: 0.95;
  --lh-heading: 1.08;
  --lh-body: 1.65;

  --ls-wide: 0.14em;   /* eyebrows / mono labels */
  --ls-cap: 0.02em;

  /* ---------- Layout ---------- */
  --container-max: 1440px;
  --container-pad: clamp(1.25rem, 4vw, 4rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --cols: 12;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: clamp(1.5rem, 3vw, 2.5rem);
  --space-lg: clamp(2.5rem, 6vw, 5rem);
  --space-xl: clamp(4rem, 10vw, 8.75rem);

  /* ---------- Bordes y radios ---------- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---------- Sombras ---------- */
  --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.45);
  --shadow-green: 0 0 0 1px rgba(166, 206, 57, 0.25), 0 12px 48px rgba(127, 184, 0, 0.12);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;
  --dur-reveal: 900ms;

  /* ---------- Z-index ---------- */
  --z-below: -1;
  --z-base: 1;
  --z-sticky: 40;
  --z-drawer: 200;
  --z-header: 220; /* el header queda sobre el drawer para conservar logo + botón cerrar */
  --z-toast: 300;

  /* ---------- Componentes ---------- */
  --header-h: 76px;
  --announce-h: 42px;
  --btn-h: 52px;
  --btn-h-lg: 60px;
  --tap-min: 44px;
}