/* ==========================================================
   Ingenial Web · Design tokens
   Paleta de marca (fija por PRD) + neutros derivados para
   dar profundidad sin salirnos de la identidad.
   ========================================================== */
:root {
  /* --- Marca --- */
  --color-primary: #18A8E0;
  --color-primary-dark: #0086C8;
  --color-accent: #F68B1F;
  --color-white: #FFFFFF;

  /* --- Neutros derivados (para contraste tipo Linear/Vercel) --- */
  --color-ink: #081420;           /* texto principal / fondo secciones oscuras */
  --color-ink-soft: #4A5C6E;      /* texto secundario */
  --color-ink-faint: #8494A3;     /* texto terciario / captions */
  --color-surface: #F5F8FB;       /* fondo secciones claras alternas */
  --color-surface-alt: #EDF3F8;
  --color-border: rgba(8, 20, 32, 0.09);
  --color-border-strong: rgba(8, 20, 32, 0.16);

  /* --- Gradientes de marca --- */
  --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, #FFB268 100%);
  --gradient-mesh: radial-gradient(circle at 20% 20%, rgba(24,168,224,0.25), transparent 45%),
                    radial-gradient(circle at 80% 0%, rgba(246,139,31,0.18), transparent 40%),
                    radial-gradient(circle at 50% 100%, rgba(0,134,200,0.20), transparent 50%);

  /* --- Tipografía --- */
  --font-display: 'Sora', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --fs-h1: clamp(2rem, 4vw + 1rem, 3.5rem);
  --fs-h2: clamp(2rem, 3vw + 1rem, 3rem);
  --fs-h3: clamp(1.25rem, 1.5vw + 1rem, 1.75rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  /* --- Espaciado --- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* --- Layout --- */
  --container-width: 1200px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* --- Sombra --- */
  --shadow-sm: 0 2px 8px rgba(8, 20, 32, 0.06);
  --shadow-md: 0 12px 32px rgba(8, 20, 32, 0.10);
  --shadow-lg: 0 24px 64px rgba(8, 20, 32, 0.16);
  --shadow-brand: 0 16px 40px rgba(24, 168, 224, 0.28);

  /* --- Transición --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur-mid: 0.45s;
  --dur-slow: 0.8s;
}