/* ==========================================================================
   DESIGN TOKENS — Nirman Engineers Associates
   Palette derived from the company logo (gear #2A9DF6 on #000000).
   ========================================================================== */

:root {
  /* ---------- Core surfaces ---------- */
  --ink:        #080B11;
  --graphite:   #0F141C;
  --slate:      #161D28;
  --slate-hi:   #1E2735;

  /* ---------- Brand accent (exact logo blue) ---------- */
  --azure:        #2A9DF6;
  --azure-bright: #5CB8FF;
  --azure-deep:   #0B6FC4;
  --azure-08:     rgba(42, 157, 246, 0.08);
  --azure-14:     rgba(42, 157, 246, 0.14);
  --azure-24:     rgba(42, 157, 246, 0.24);
  --azure-40:     rgba(42, 157, 246, 0.40);

  /* ---------- Luxury metallic (use sparingly, <5% of surface) ---------- */
  --brass:      #C9A227;
  --brass-soft: #E3C766;
  --brass-14:   rgba(201, 162, 39, 0.14);

  /* ---------- Light sections ---------- */
  --concrete:     #F4F6FA;
  --concrete-dim: #E4E9F1;

  /* ---------- Text ---------- */
  --text-hi:  #F5F8FC;
  --text-mid: #9EAFC2;
  --text-dim: #64798F;
  --text-ink: #0F141C;
  --text-ink-mid: #46566B;

  /* ---------- Lines & glass ---------- */
  --hairline:    rgba(255, 255, 255, 0.08);
  --hairline-hi: rgba(255, 255, 255, 0.14);
  --hairline-lt: rgba(15, 20, 28, 0.10);
  --glass:       rgba(22, 29, 40, 0.55);
  --glass-hi:    rgba(30, 39, 53, 0.72);

  /* ---------- Utility ---------- */
  --whatsapp: #25D366;
  --success:  #2ECC71;
  --danger:   #FF5A5A;

  /* ---------- Typography ---------- */
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Consolas', ui-monospace, monospace;

  /* Fluid type scale */
  /* Capped so the headline, CTAs and stat cards all clear a 900px fold. */
  --fs-hero:  clamp(2.4rem, 5vw, 4.5rem);
  --fs-h1:    clamp(2.2rem, 4.6vw, 4rem);
  --fs-h2:    clamp(1.85rem, 3.4vw, 3rem);
  --fs-h3:    clamp(1.25rem, 1.9vw, 1.6rem);
  --fs-h4:    clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-lead:  clamp(1.05rem, 1.35vw, 1.25rem);
  --fs-body:  1rem;
  --fs-sm:    0.9375rem;
  --fs-xs:    0.8125rem;
  --fs-mono:  0.75rem;

  /* ---------- Radii ---------- */
  --r-tech:  4px;
  --r-card:  14px;
  --r-panel: 22px;
  --r-pill:  999px;

  /* ---------- Spacing ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  /* ---------- Layout ---------- */
  --container: 1280px;
  --container-narrow: 920px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---------- Multi-layer shadows (never single/flat) ---------- */
  --shadow-card:
    0 1px 2px rgba(0, 0, 0, 0.30),
    0 4px 10px rgba(0, 0, 0, 0.28),
    0 18px 40px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-lift:
    0 2px 4px rgba(0, 0, 0, 0.32),
    0 10px 22px rgba(0, 0, 0, 0.34),
    0 32px 70px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-azure:
    0 8px 26px rgba(42, 157, 246, 0.28),
    0 2px 6px rgba(42, 157, 246, 0.20);
  --shadow-azure-lg:
    0 12px 40px rgba(42, 157, 246, 0.38),
    0 4px 12px rgba(42, 157, 246, 0.26);
  --shadow-light:
    0 1px 2px rgba(15, 20, 28, 0.05),
    0 4px 12px rgba(15, 20, 28, 0.07),
    0 16px 36px rgba(15, 20, 28, 0.08);
  --shadow-up:
    0 -1px 2px rgba(0, 0, 0, 0.24),
    0 -8px 24px rgba(0, 0, 0, 0.34);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   180ms;
  --dur-mid:    320ms;
  --dur-slow:   600ms;
  --dur-reveal: 900ms;

  /* ---------- Z-index scale ---------- */
  --z-base:     1;
  --z-raised:   10;
  --z-sticky:   20;
  --z-header:   30;
  --z-overlay:  40;
  --z-modal:    50;
  --z-cursor:   60;
  --z-loader:   70;

  /* ---------- Textures ---------- */
  --blueprint:
    repeating-linear-gradient(0deg,  transparent 0 63px, rgba(42,157,246,0.05) 63px 64px),
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(42,157,246,0.05) 63px 64px);
}