:root {
    /* Breakpoints */
    --dp-bp-sm: 768px;
    --dp-bp-lg: 1280px;
    --dp-bp-xl: 1536px;
  
    /* Layout */
    --dp-container-max: 1440px;
    --dp-container-narrow: 960px;
    --dp-gutter: 20px;
    --dp-section-y: 64px;
    --dp-section-y-lg: 88px;
  
    /* Spacing */
    --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;
  
    /* Colors */
    --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;

    /* Colors gradient */

    --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);
  
    /* Typography */
    --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;
  
    /* Radius */
    --dp-radius-sm: 12px;
    --dp-radius-md: 20px;
    --dp-radius-lg: 32px;
    --dp-radius-xl: 48px;
    --dp-radius-pill: 999px;
  
    /* Effects */
    --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;
  
    /* Motion */
    --dp-duration-fast: 180ms;
    --dp-duration-base: 280ms;
    --dp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  
    /* Layers */
    --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: 1560px;
      --dp-container-narrow: 1040px;
    }
  }