:root {
  
  --dp-bp-sm: 768px;
  --dp-bp-lg: 1280px;
  --dp-bp-xl: 1536px;
  --dp-bp-xxl: 2200px;

  
  --dp-container-max: 1440px;
  --dp-container-narrow: 960px;
  --dp-gutter: 20px;
  --dp-section-y: 64px;
  --dp-section-y-lg: 88px;

  
  --dp-space-050: 4px;
  --dp-space-100: 8px;
  --dp-space-150: 12px;
  --dp-space-200: 16px;
  --dp-space-300: 24px;
  --dp-space-400: 32px;
  --dp-space-500: 48px;
  --dp-space-600: 64px;
  --dp-space-700: 80px;
  --dp-space-800: 96px;
  --dp-space-900: 120px;

  
  --dp-color-bg: #050505;
  --dp-color-bg-elevated: #0d0d0f;
  --dp-color-surface-1: #121214;
  --dp-color-surface-2: #1a1a1d;
  --dp-color-surface-3: #2a2a2e;
  --dp-color-surface-light: #d9d9d9;

  --dp-color-text: #f4f4f5;
  --dp-color-text-muted: rgba(244, 244, 245, 0.72);
  --dp-color-text-soft: rgba(244, 244, 245, 0.52);

  --dp-color-border-soft: rgba(255, 255, 255, 0.12);
  --dp-color-border-strong: rgba(255, 255, 255, 0.22);

  --dp-color-accent: #ffffff;
  --dp-color-accent-contrast: #0a0a0a;

  
  --dp-gradient-1: rgba(255,255,255,0.10);
  --dp-gradient-2: rgba(160,170,255,0.08);
  --dp-gradient-3: rgba(255,255,255,0.06);
  --dp-gradient-4: rgba(120,130,255,0.08);

  
  --dp-font-family-base: "Inter", system-ui, -apple-system, sans-serif;
  --dp-font-family-display: "Inter", system-ui, -apple-system, sans-serif;

  --dp-title-xl: 42px;
  --dp-title-lg: 32px;
  --dp-title-md: 24px;
  --dp-title-sm: 20px;
  --dp-text: 16px;
  --dp-text-sm: 14px;
  --dp-text-xs: 12px;

  --dp-line-title: 1.05;
  --dp-line-copy: 1.5;

  --dp-heading-weight: 900;
  --dp-heading-line: .98;
  --dp-heading-tracking: -.035em;
  --dp-heading-transform: uppercase;

  
  --dp-radius-sm: 12px;
  --dp-radius-md: 20px;
  --dp-radius-lg: 32px;
  --dp-radius-xl: 48px;
  --dp-radius-pill: 999px;

  
  --dp-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.28);
  --dp-shadow-card: 0 20px 60px rgba(0, 0, 0, 0.35);
  --dp-blur-soft: 16px;

  
  --dp-duration-fast: 180ms;
  --dp-duration-base: 280ms;
  --dp-ease: cubic-bezier(0.22, 1, 0.36, 1);

  
  --dp-z-base: 1;
  --dp-z-overlay: 10;
  --dp-z-header: 100;
}

@media (min-width: 768px) {
  :root {
    --dp-gutter: 28px;
    --dp-section-y: 80px;
    --dp-section-y-lg: 104px;
    --dp-title-xl: 52px;
    --dp-title-lg: 38px;
    --dp-title-md: 28px;
    --dp-title-sm: 22px;
    --dp-text: 17px;
  }
}

@media (min-width: 1280px) {
  :root {
    --dp-gutter: 48px;
    --dp-section-y: 110px;
    --dp-section-y-lg: 136px;
    --dp-title-xl: 72px;
    --dp-title-lg: 48px;
    --dp-title-md: 32px;
    --dp-title-sm: 24px;
    --dp-text: 18px;
  }
}

@media (min-width: 1536px) {
  :root {
    --dp-gutter: 64px;
    --dp-container-max: 1760px;
    --dp-container-narrow: 1240px;
  }
}

@media (min-width: 2200px) {
  :root {
    --dp-gutter: 72px;
    --dp-container-max: 2460px;
    --dp-container-narrow: 1560px;
  }
}

:root {
  --dp-page-gutter: clamp(16px, 3.4vw, 64px);
  --dp-content-wide: 1500px;
  --dp-content-reading: 72ch;

  --dp-space-section-fluid: clamp(56px, 7vw, 112px);
  --dp-space-block-fluid: clamp(24px, 3.5vw, 56px);
  --dp-space-card-fluid: clamp(18px, 2.4vw, 36px);

  --dp-font-display-xl: clamp(2.5rem, 5vw, 5.25rem);
  --dp-font-display-lg: clamp(2rem, 3.6vw, 4rem);
  --dp-font-display-md: clamp(1.55rem, 2.4vw, 2.75rem);
  --dp-font-body-fluid: clamp(0.98rem, 0.93rem + 0.18vw, 1.12rem);

  --dp-control-min: 44px;
  --dp-control-md: 52px;
  --dp-control-lg: 60px;
  --dp-focus-ring: 0 0 0 3px rgba(255,255,255,.42), 0 0 0 5px rgba(17,17,17,.82);
}