/* ============================================================
   ITBOOST — Brand Design Tokens
   Studio direction: Dark editorial luxury, electric lime accent.
   Fonts: Fraunces (serif display) + Inter (sans body)
   ============================================================ */

:root {
  /* --- Color System -------------------------------------------- */
  --bg:             #0E0F11;
  --bg-elevated:    #16181B;
  --surface:        #1B1E22;
  --surface-2:      #24282E;
  --surface-hover:  rgba(255, 255, 255, 0.05);

  --text:           #F5F5F3;
  --text-dim:       #9E9EA3;
  --text-faint:     rgba(245, 245, 243, 0.55);

  --accent:         #D7FF3A;
  --accent-hover:   #c4ee29;
  --accent-soft:    rgba(215, 255, 58, 0.12);
  --accent-line:    rgba(215, 255, 58, 0.35);
  --accent-glow:    rgba(215, 255, 58, 0.25);
  --accent-on:      #0E0F11;

  --line:           rgba(255, 255, 255, 0.08);
  --line-strong:    rgba(255, 255, 255, 0.16);

  --overlay:        rgba(14, 15, 17, 0.85);

  /* --- Option 2 Architectural Grid Tokens ------------------------- */
  --nav-grid-bg:         #0C0D0E;
  --nav-grid-bg-scroll:  #08090A;
  --nav-grid-border:     rgba(255, 255, 255, 0.08);
  --nav-grid-hairline:   rgba(255, 255, 255, 0.12);
  --nav-grid-hover-bg:   rgba(215, 255, 58, 0.06);
  /* --- Nav Height (for drawer offset) -------------------------- */
  --nav-height: 64px;

  /* --- Typography --------------------------------------------- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid typography scale */
  --fs-hero:   clamp(2.75rem, 1.4rem + 6.6vw, 5.5rem);   /* 44px -> 88px */
  --fs-h1:     clamp(2.25rem, 1.3rem + 4.7vw, 4rem);     /* 36px -> 64px */
  --fs-h2:     clamp(1.75rem, 1.1rem + 3.2vw, 2.75rem);  /* 28px -> 44px */
  --fs-h3:     clamp(1.35rem, 1.05rem + 1.6vw, 1.85rem);  /* 22px -> 30px */
  --fs-h4:     clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);   /* 18px -> 21px */
  --fs-numeral: clamp(3rem, 1.5rem + 6vw, 5.5rem);          /* 48px -> 88px */
  --fs-lead:   clamp(1.1rem, 1rem + 0.5vw, 1.35rem);     /* 18px -> 22px */
  --fs-body:   clamp(0.98rem, 0.95rem + 0.2vw, 1.06rem); /* 16px -> 17px */
  --fs-small:  0.875rem;                                  /* 14px */
  --fs-micro:  0.75rem;                                   /* 12px */

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.55;
  --lh-loose:   1.75;

  --tracking-tighter: -0.05em;
  --tracking-tight:  -0.03em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.16em;

  /* --- Spacing & Container ------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --section-pad-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  --container: 1200px;
  --container-narrow: 820px;
  --container-wide: 1440px;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* --- Radius & Shadows ---------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  --t-fast: 0.15s ease;
  --t:      0.3s ease;
  --t-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --shadow-2: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-accent: 0 0 0 1px var(--accent-line), 0 10px 40px rgba(215, 255, 58, 0.12);

  --z-base: 1;
  --z-nav: 100;
  --z-overlay: 500;
  --z-modal: 1000;
}