/* ============================================================
   RAF BARCENES V2 — DESIGN SYSTEM / TOKENS
   Fuente de verdad: logo real + brochure corporativo (colores
   muestreados del archivo original). Premium B2B corporativo.
   ============================================================ */

:root {
  /* ---- BRAND (muestreado del logo real) ----------------- */
  --raf-navy:        #0B2A55;  /* secciones oscuras + texto fuerte */
  --raf-navy-800:    #0E326A;
  --raf-blue:        #1E50A2;  /* azul corporativo primario (royal) */
  --raf-blue-700:    #17407F;  /* hover / estados */
  --raf-blue-050:    #EAF1FB;  /* tinte de fondo */
  --raf-orange:      #F5811F;  /* CTA / acento / highlights */
  --raf-orange-600:  #E0700F;  /* hover */
  --raf-green:       #6FA644;  /* secundario */
  --raf-red:         #B03030;  /* solo presente en el logo, no UI */

  /* ---- NEUTRALS ----------------------------------------- */
  --white:      oklch(99.5% .003 250);
  --bg:         oklch(99.5% .003 250);
  --bg-2:       #F5F7FA;   /* off-white ground */
  --bg-3:       #EDF1F6;
  --ink:        #14202B;   /* texto principal */
  --ink-2:      #3E4C59;   /* texto cuerpo */
  --muted:      #647381;   /* texto secundario (AA en ≥16px) */
  --line:       #E2E8EF;   /* hairline */
  --line-2:     #D3DCE5;

  /* ---- ON-DARK ----------------------------------------- */
  --on-dark:       rgba(255,255,255,.94);
  --on-dark-2:     rgba(255,255,255,.72);
  --on-dark-line:  rgba(255,255,255,.14);
  --on-dark-soft:  rgba(255,255,255,.06);

  /* ---- TYPOGRAPHY --------------------------------------- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-display: clamp(2.55rem, 1.4rem + 4.6vw, 4.25rem);   /* H1  ~41→68px */
  --fs-h1:      clamp(2.3rem, 1.5rem + 3.4vw, 3.5rem);
  --fs-h2:      clamp(1.9rem, 1.25rem + 2.6vw, 3.1rem);    /* ~30→50px */
  --fs-h3:      clamp(1.3rem, 1.05rem + 1vw, 1.7rem);
  --fs-h4:      clamp(1.1rem, 1rem + .5vw, 1.3rem);
  --fs-lg:      clamp(1.075rem, 1rem + .35vw, 1.2rem);     /* body large */
  --fs-body:    1rem;      /* 16 */
  --fs-sm:      .9375rem;  /* 15 */
  --fs-xs:      .8125rem;  /* 13 */
  --fs-label:   .75rem;    /* 12 */

  --lh-tight: 1.06;
  --lh-head:  1.12;
  --lh-snug:  1.35;
  --lh-body:  1.62;
  --tr-tight: -0.021em;
  --tr-label: 0.16em;

  /* ---- SPACING (base 4) --------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-32: 128px;
  --section-y: clamp(48px, 5vw, 72px);
  --section-head-gap: clamp(24px, 3vw, 36px);
  --gutter:    clamp(20px, 5vw, 40px);
  --container:  1208px;
  --container-narrow: 940px;

  /* ---- RADIUS ------------------------------------------- */
  --r-xs: 6px; --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 26px; --r-pill: 999px;

  /* ---- SHADOWS (difusas, tintadas en navy, nunca duras) - */
  --shadow-xs: 0 1px 2px rgba(11,42,85,.05);
  --shadow-sm: 0 1px 2px rgba(11,42,85,.05), 0 3px 10px rgba(11,42,85,.05);
  --shadow:    0 4px 14px rgba(11,42,85,.07), 0 14px 34px rgba(11,42,85,.08);
  --shadow-lg: 0 10px 24px rgba(11,42,85,.08), 0 32px 64px rgba(11,42,85,.14);
  --ring:      inset 0 0 0 1px var(--line);

  /* ---- MOTION (brief §29) ------------------------------- */
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --motion-slow: 600ms;
  --motion-reveal: 600ms;
  --motion-stagger: 60ms;
  --motion-loader: 1000ms;
  --reveal-distance: 12px;
  --ease-standard:  cubic-bezier(.23,1,.32,1);
  --ease-emphasized: cubic-bezier(.23,1,.32,1);
  --header-height: 88px;

  /* ---- LAYERS ------------------------------------------- */
  --z-header: 100;
  --z-menu:   200;
}