/* ============================================
   ForgeIT Design Tokens
   ============================================ */

:root {
  /* Colors */
  --color-charcoal: #2D2D2D;
  --color-charcoal-dark: #1a1a1a;
  --color-orange: #FF6F61;
  --color-orange-hover: #ff5a4d;
  --color-silver: #C0C0C0;
  --color-light-gray: #F5F5F5;
  --color-mid-gray: #EDEDED;
  --color-white: #FFFFFF;
  --color-body-text: #333333;
  --color-muted-text: #666666;

  /* Typography */
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font Sizes (fluid) */
  --text-h1: clamp(2.25rem, 5vw, 3rem);
  --text-h2: clamp(1.75rem, 4vw, 2.25rem);
  --text-h3: clamp(1.25rem, 3vw, 1.5rem);
  --text-h4: clamp(1.1rem, 2vw, 1.25rem);
  --text-body: 1.125rem;
  --text-body-sm: 1rem;
  --text-small: 0.875rem;
  --text-button: 1rem;
  --text-nav: 0.9375rem;

  /* Spacing */
  --section-padding: clamp(3rem, 8vw, 6rem);
  --container-max: 1200px;
  --container-padding: clamp(1rem, 3vw, 2rem);
  --gap-sm: 1rem;
  --gap-md: 1.5rem;
  --gap-lg: 2rem;
  --gap-xl: 3rem;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15);
  --shadow-orange: 0 4px 20px rgba(255, 111, 97, 0.3);

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Header */
  --header-height: 80px;
}