/* ====================================
   CSS Custom Properties
   Brand Colors, Typography, Spacing
   ==================================== */

:root {
  /* ==================
     Brand Colors
     ================== */

  /* Official Brand Colors */
  --color-dark-charcoal: #373737;
  --color-brand-primary: #00AAD7;
  --color-brand-mid: #3FCFF5;
  --color-brand-light: #8FE5FD;
  --color-off-white: #F6F4F4;

  /* Extended Palette */
  --color-near-black: #1a1a1a;
  --color-white: #ffffff;
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #eeeeee;
  --color-gray-600: #757575;

  /* Functional Colors */
  --color-text-primary: #373737;
  --color-text-inverse: #F6F4F4;
  --color-text-secondary: #757575;
  --color-text-muted: rgba(255, 255, 255, 0.65);
  --color-background-light: #F6F4F4;
  --color-background-dark: #1a1a1a;

  /* ==================
     Typography
     ================== */

  /* Font Families */
  --font-heading: 'Space Grotesk', 'Monument Extended', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: 'Inter', 'Sansation', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;

  /* Font Sizes - Fluid Typography */
  --font-size-hero: clamp(2rem, 5vw, 3.5rem);
  --font-size-h1: clamp(1.75rem, 4vw, 2.75rem);
  --font-size-h2: clamp(1.5rem, 3vw, 2.25rem);
  --font-size-h3: clamp(1.25rem, 2.5vw, 1.75rem);
  --font-size-body-large: clamp(1.125rem, 2vw, 1.25rem);
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Line Heights */
  --line-height-tight: 1.1;
  --line-height-snug: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.8;

  /* ==================
     Spacing System
     ================== */

  --spacing-xs: 0.5rem;    /* 8px */
  --spacing-sm: 1rem;      /* 16px */
  --spacing-md: 2rem;      /* 32px */
  --spacing-lg: 4rem;      /* 64px */
  --spacing-xl: 6rem;      /* 96px */
  --spacing-2xl: 8rem;     /* 128px */

  /* Layout Constraints */
  --max-content-width: 1400px;
  --content-padding-x: clamp(1.5rem, 5vw, 3rem);

  /* ==================
     Animation & Timing
     ================== */

  /* Easing Functions */
  --ease-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-entrance: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0.0, 1, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Duration */
  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;

  /* ==================
     Component Tokens
     ================== */

  /* Cards */
  --card-padding: 2.5rem;
  --card-padding-mobile: 2rem;
  --card-border-radius: 12px;
  --card-border-color: rgba(0, 170, 215, 0.2);
  --card-background: rgba(255, 255, 255, 0.03);

  /* Sections */
  --section-padding-y-desktop: 5rem;
  --section-padding-y-tablet: 4rem;
  --section-padding-y-mobile: 3rem;
}

/* ==================
   Reduced Motion
   ================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-normal: 0.01ms;
    --duration-slow: 0.01ms;
    --duration-slower: 0.01ms;
  }
}