/* =========================================================
   ECK BTP — Design Tokens
   ========================================================= */

:root {
  /* ── Colors ─────────────────────────────────────────── */
  --clr-navy:        #0B2545;
  --clr-navy-dark:   #071B33;
  --clr-orange:      #FF5A1F;
  --clr-orange-soft: #F9733B;
  --clr-white:       #FFFFFF;
  --clr-offwhite:    #F7F7F3;
  --clr-gray-light:  #EAECEF;
  --clr-gray-mid:    #C4C9D4;
  --clr-text:        #10213C;
  --clr-text-muted:  #4A5568;
  --clr-text-light:  #718096;

  /* ── Orange variants ─────────────────────────────────── */
  --clr-orange-hover: #e44c14;
  --clr-orange-10:    rgba(255, 90, 31, 0.10);
  --clr-orange-20:    rgba(255, 90, 31, 0.20);

  /* ── Navy with alpha ─────────────────────────────────── */
  --clr-navy-90:     rgba(11, 37, 69, 0.90);
  --clr-navy-80:     rgba(11, 37, 69, 0.80);
  --clr-navy-60:     rgba(11, 37, 69, 0.60);

  /* ── Typography ─────────────────────────────────────── */
  --font-main:   'Manrope', 'DM Sans', 'Inter', system-ui, sans-serif;

  --fs-hero:    clamp(2.75rem, 7vw, 6rem);
  --fs-h2:      clamp(1.875rem, 4vw, 3.5rem);
  --fs-h3:      clamp(1.25rem, 2.5vw, 1.75rem);
  --fs-h4:      1.125rem;
  --fs-body:    1rem;
  --fs-sm:      0.9rem;
  --fs-xs:      0.8rem;
  --fs-eyebrow: 0.72rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extrabold:800;

  --lh-tight:   1.15;
  --lh-snug:    1.35;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  /* ── Spacing ─────────────────────────────────────────── */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;
  --sp-32:  8rem;

  /* ── Layout (Fluid Responsive Adaptation) ────────────── */
  --container-max:  min(94vw, 1720px);
  --hero-max:       min(95vw, 1760px);
  --container-pad:  clamp(1rem, 3.5vw, 4rem);
  --header-h:       84px;
  --section-pad-y:  clamp(4rem, 6vw, 7.5rem);

  /* ── Radius (Controlled architectural scale) ──────────── */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-btn: 8px;
  --radius-md:  8px;
  --radius-card:10px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full:9999px;

  /* ── Shadows (Subtle, refined) ───────────────────────── */
  --shadow-xs:  0 1px 2px rgba(11,37,69,0.05);
  --shadow-sm:  0 1px 3px rgba(11,37,69,0.06), 0 1px 2px rgba(11,37,69,0.04);
  --shadow-md:  0 4px 12px rgba(11,37,69,0.08);
  --shadow-lg:  0 8px 24px rgba(11,37,69,0.10);
  --shadow-xl:  0 16px 40px rgba(11,37,69,0.12);
  --shadow-orange: 0 2px 10px rgba(255,90,31,0.22);

  /* ── Transitions ─────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast:      180ms;
  --dur-normal:    300ms;
  --dur-slow:      500ms;

  /* ── Z-index ─────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-above:     10;
  --z-header:    100;
  --z-overlay:   200;
  --z-modal:     300;
  --z-float:     400;
}