/* ============================================================
   B5 SERVICES GROUP — DESIGN TOKENS
   Strategic business consulting brand system
   ============================================================ */

:root {
  /* --- Brand Colors --- */
  --color-blue:       #0066DD;
  --color-blue-dark:  #0052B3;
  --color-magenta:    #FF2E97;
  --color-magenta-dark: #D9006E;
  --color-navy:       #0A0E27;
  --color-navy-mid:   #111535;
  --color-green:      #00AA66;
  --color-purple:     #7744DD;
  --color-orange:     #FF6644;
  --color-gold:       #FFAA33;

  /* --- Neutrals --- */
  --color-white:      #FFFFFF;
  --color-warm-white: #FAFAF8;
  --color-gray-100:   #E8E8EA;
  --color-gray-200:   #D0D0D4;
  --color-gray-400:   #8A8A90;
  --color-charcoal:   #2A2A2E;
  --color-black:      #1A1A1C;

  /* --- Typography --- */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-h1:      clamp(40px, 5vw, 68px);
  --text-h2:      clamp(32px, 4vw, 48px);
  --text-h3:      clamp(24px, 3vw, 32px);
  --text-h4:      clamp(20px, 2.5vw, 24px);
  --text-body-lg: clamp(18px, 2vw, 20px);
  --text-body:    clamp(16px, 1.8vw, 18px);
  --text-body-sm: clamp(14px, 1.6vw, 16px);
  --text-label:   13px;
  --text-button:  clamp(16px, 1.6vw, 18px);
  --text-quote:   clamp(20px, 2.2vw, 24px);

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-widest:  0.1em;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* --- Spacing Scale (4px base) --- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-28:  112px;
  --space-32:  128px;

  /* --- Layout --- */
  --container-max:    1360px;
  --container-pad:    clamp(24px, 5vw, 80px);
  --section-padding:  clamp(56px, 8vw, 100px);
  --section-gap:      clamp(48px, 6vw, 80px);
  --grid-gutter:      clamp(20px, 2vw, 28px);

  /* --- Borders & Radius --- */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    20px;
  --radius-full:  9999px;

  --border-light: 1px solid var(--color-gray-100);
  --border-mid:   2px solid var(--color-gray-100);

  /* --- Shadows --- */
  --shadow-xs:    0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md:    0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.16);
  --shadow-blue:  0 4px 16px rgba(0, 102, 221, 0.25);
  --shadow-magenta: 0 4px 12px rgba(255, 46, 151, 0.25);
  --shadow-navy:  0 8px 32px rgba(10, 14, 39, 0.4);

  /* --- Transitions --- */
  --transition-fast:   150ms ease-out;
  --transition-base:   250ms ease-out;
  --transition-slow:   350ms ease-out;
  --transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Z-index --- */
  --z-base:    1;
  --z-card:    10;
  --z-sticky:  100;
  --z-dropdown: 200;
  --z-modal:   1000;
  --z-top:     9999;

  /* --- Nav --- */
  --nav-height: 72px;
}