/* ==========================================================
   IMPERIUM BUILDERS — DESIGN TOKENS
   Brand identity is locked. Do not introduce new colors.
   ========================================================== */

:root{
  /* ---- Color ---- */
  --navy:#0B1F2E;
  --navy-secondary:#14324A;
  --blueprint:#2C5578;
  --accent:#F2A93B;
  --bg-light:#F6F7F5;
  --bg-gray:#E7EAE6;
  --white:#FFFFFF;
  --text:#10222E;
  --muted:#546C83;

  /* ---- Typography ---- */
  --font-display:'Barlow Condensed', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --fs-hero: clamp(38px, 5vw, 68px);
  --fs-h1: clamp(34px, 4.4vw, 56px);
  --fs-h2: clamp(28px, 3.2vw, 40px);
  --fs-h3: clamp(20px, 2vw, 26px);
  --fs-lead: clamp(17px, 1.4vw, 19px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-meta: 12.5px;

  --lh-tight: 1.05;
  --lh-heading: 1.2;
  --lh-body: 1.65;

  /* ---- Spacing (rhythm) ---- */
  --space-section: clamp(64px, 9vw, 160px);
  --space-section-lg: clamp(80px, 11vw, 180px);
  --space-block: clamp(28px, 3.6vw, 48px);
  --space-inline: 20px;
  --gutter: 24px;

  /* ---- Layout ---- */
  --container-max: 1400px;
  --container-content: 1140px;
  --outer-margin: clamp(20px, 5vw, 64px);

  /* ---- Detail ---- */
  --radius: 2px;
  --border-hairline: 1px solid rgba(44, 85, 120, 0.18);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Tonal variations (depth system) ----
     Same brand colors, expressed at different opacities/mixes
     so sections read as distinct environments, not flat blocks. */
  --navy-95: rgba(11, 31, 46, 0.95);
  --navy-85: rgba(11, 31, 46, 0.85);
  --navy-70: rgba(11, 31, 46, 0.70);
  --navy-40: rgba(11, 31, 46, 0.40);
  --blue-20: rgba(44, 85, 120, 0.20);
  --blue-10: rgba(44, 85, 120, 0.10);
  --blue-06: rgba(44, 85, 120, 0.06);
  --orange-85: rgba(242, 169, 59, 0.85);
  --orange-40: rgba(242, 169, 59, 0.40);
  --orange-15: rgba(242, 169, 59, 0.15);
  --white-08: rgba(246, 247, 245, 0.08);
  --white-15: rgba(246, 247, 245, 0.15);

  /* ---- Motion timing (hero choreography) ---- */
  --t-header: .4s;
  --t-eyebrow: .5s;
  --t-headline: .7s;
  --t-body: .8s;
  --t-cta: .9s;
  --t-image: 1s;
}