/* ============================================================
   Elite Sense Consulting — Design Tokens
   Source of truth: Figma file FsL4nHg06aDoWwhHlH8apU, node 712:6248
   Do NOT modify without design approval.
   ============================================================ */

:root {
  /* ---------- Colors ---------- */
  --c-deep-navy:           #2F455C;
  --c-teal:                #21D0B3;
  --c-blue-grad-end:       #6D8BBA;

  --c-text-primary:        #1A1A2E;
  --c-text-secondary:      #4A4F5C;
  --c-text-muted:          #697077;
  --c-text-light-primary:  #F0EDE8;
  --c-text-light-body:     #FBFBFB;

  --c-border:              #E8EDF2;
  --c-border-dark:         #47607A;

  --c-bg:                  #FFFFFF;
  --c-bg-alt:              #F5F6F8;

  --c-glass-fill:          rgba(255, 255, 255, 0.7);
  --c-glass-fill-soft:     rgba(255, 255, 255, 0.6);
  --c-glass-fill-faint:    rgba(255, 255, 255, 0.5);

  /* ---------- Brand gradient ---------- */
  --grad-brand:            linear-gradient(90deg, #21D0B3 0%, #6D8BBA 100%);
  --grad-brand-vert:       linear-gradient(180deg, #21D0B3 0%, #6D8BBA 100%);

  /* ---------- Typography ---------- */
  --ff-base: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Fluid type scale — clamp(min, fluid, max) where max is the desktop value */
  --fs-display: clamp(32px, 4.2vw, 48px);
  --fs-h2:      clamp(28px, 3.4vw, 40px);
  --fs-h3:      clamp(20px, 2.1vw, 24px);
  --fs-h4:      16px;
  --fs-body-lg: clamp(16px, 1.6vw, 18px);
  --fs-body:    14px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;

  --fw-regular: 400;
  --fw-medium:  500;

  --lh-display: 1.2;
  --lh-h2:      1.4;
  --lh-h3:      1.33;
  --lh-h4:      1.6;
  --lh-body:    1.6;

  --tracking-h2:      -0.5px;
  --tracking-eyebrow: 2.5px;

  /* ---------- Spacing ---------- */
  --sp-xs:   8px;
  --sp-sm:   16px;
  --sp-md:   24px;
  --sp-lg:   32px;
  --sp-xl:   48px;
  --sp-2xl:  64px;
  --sp-3xl:  80px;
  --sp-4xl:  100px;
  --sp-5xl:  120px;
  --sp-6xl:  140px;
  --sp-7xl:  160px;

  /* Fluid section padding — scales with viewport between 375 and 1440 */
  --section-px:        clamp(24px, 5.5vw, 80px);
  --section-py-lg:     clamp(96px, 11vw, 160px);
  --section-py-md:     clamp(72px, 8.3vw, 120px);
  --section-py-sm:     clamp(48px, 4.4vw, 64px);

  --container-max:     1440px;

  /* ---------- Radii ---------- */
  --radius-sm:   12px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-card:   0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-soft:   0 4px 14px rgba(0, 0, 0, 0.08);
  --shadow-lift:   0 8px 24px rgba(0, 0, 0, 0.10);

  /* ---------- Buttons ---------- */
  --btn-h-lg:      54px;
  --btn-h-sm:      40px;
  --btn-radius-lg: 16px;
  --btn-radius-sm: 12px;
  --btn-px:        24px;

  /* ---------- 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:        300ms;
  --dur-slow:        400ms;
  --dur-marquee:     300s;

  /* ---------- Layout ---------- */
  --nav-height:    72px;
  --z-nav:         100;
  --z-modal:       1000;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-marquee: 0s;
  }
}