:root {
  /* Brand Colors */
  --navy:        #0d1b2a;
  --steel:       #1e293b;
  --teal:        #e8e8e8;
  --teal-dark:   #c0c0c0;
  --white:       #ffffff;
  --ice:         #f0f4f8;
  --footer-bg:   #1b2838;
  --text-dark:   #a8b8cc;
  --text-mid:    #374151;
  --text-light:  #64748b;
  --text-head:   #0c1222;
  --teal-muted:  #d0d0d0;
  --border-dark: rgba(255,255,255,0.08);
  --border-ice:  #dfe4ed;

  /* Typography */
  --font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  --w-normal:  400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   700; /* IBM Plex Sans max weight — 900 unsupported */

  /* Type Scale */
  --t-xs:   0.6875rem;  /* 11px */
  --t-sm:   0.8125rem;  /* 13px */
  --t-base: 1rem;       /* 16px */
  --t-lg:   1.125rem;   /* 18px */
  --t-xl:   1.375rem;   /* 22px */
  --t-2xl:  1.75rem;    /* 28px */
  --t-3xl:  2.25rem;    /* 36px */
  --t-4xl:  2.75rem;    /* 44px */
  --t-5xl:  3.5rem;     /* 56px */
  --t-6xl:  4.5rem;     /* 72px */

  /* Spacing (8px grid) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-25: 100px;
  --s-30: 120px;

  /* Layout */
  --max-w:   1200px;
  --gutter:  clamp(24px, 5vw, 80px);
  --col-gap: clamp(16px, 2.5vw, 32px);

  /* Easing */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Duration */
  --d-fast:   150ms;
  --d-base:   300ms;
  --d-slow:   600ms;
  --d-slower: 900ms;
}