/* Color Palette */
:root {
  /* Primary Colors */
  --bb-color-black: #000;
  --bb-color-white: #fff;
  --bb-color-dark-gray: #333;
  --bb-color-light-gray: #f5f5f5;
  --bb-color-border: #e8e8e8;
  --bb-color-muted: #999;

  /* Backgrounds */
  --bb-bg-primary: #fff;
  --bb-bg-dark: #000;
  --bb-bg-light: #e8e8e8;
  --bb-bg-subtle: #f5f5f5;

  /* Text Colors */
  --bb-text-primary: #000;
  --bb-text-muted: #999;
  --bb-text-light: #fff;

  /* Semantic Colors */
  --bb-overlay-dark: rgba(0, 0, 0, 0.22);
  --bb-overlay-light: rgba(255, 255, 255, 0.1);

  /* Typography Scale */
  --bb-font-family: 'Futura PT', sans-serif;
  --bb-font-size-base: 16px;
  --bb-font-size-small: 14px;
  --bb-font-size-xs: 12px;
  --bb-font-size-2xs: 11px;
  --bb-line-height-tight: 1.1;
  --bb-line-height-normal: 1.5;
  --bb-line-height-relaxed: 1.8;

  /* Spacing Scale */
  --bb-spacing-xs: 8px;
  --bb-spacing-sm: 12px;
  --bb-spacing-md: 16px;
  --bb-spacing-lg: 24px;
  --bb-spacing-xl: 36px;
  --bb-spacing-2xl: 60px;

  /* Responsive Spacing (clamp) */
  --bb-padding-page: clamp(24px, 8vw, 160px);
  --bb-padding-section: clamp(60px, 8vw, 120px);
  --bb-gap-grid: 16px;
  --bb-gap-grid-sm: 12px;

  /* Transitions */
  --bb-transition-fast: 0.2s ease;
  --bb-transition-normal: 0.4s ease;
  --bb-transition-slow: 0.6s ease;
}