/* ==========================================
   DIB COLLABORATIVE - SHARED TOKEN STYLESHEET
   ========================================== */

:root {
  /* ============ COLOR TOKENS ============ */
  
  /* Primary Colors */
  --black: #1A1A1A;
  --paper: #F5F3F0;
  --khaki: #B9AF9B;
  --brown: #BF6B4A;
  --charcoal: #2D3E50;
  --white: #FFFFFF;
  
  /* ============ LAYOUT & SPACING ============ */
  --maxw: 1220px;
  --gutter: 52px;
  --gap: 72px;
  
  /* ============ SHARED UTILITIES ============ */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.2s ease;
}

/* ============ UNIVERSAL RESET ============ */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ============ UTILITY CLASSES ============ */

/* Hidden utility for delayed visibility */
.u-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* SVG currentColor inheritance */
svg {
  stroke: currentColor;
  fill: none;
}

/* Thin border utility */
.u-border-light {
  border: 1px solid currentColor;
  opacity: 0.1;
}

/* ============ RESPONSIVE HELPERS ============ */
@media (max-width: 950px) {
  :root {
    --gutter: 32px;
    --gap: 48px;
  }
}

@media (max-width: 700px) {
  :root {
    --gutter: 20px;
    --gap: 32px;
  }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}