:root {
  /* ========================================
     COLORS
  ======================================== */

  --color-background: #050505;
  --color-background-soft: #09090b;
  --color-surface: #0d0d10;
  --color-surface-light: #141419;

  --color-text: #f5f5f3;
  --color-text-soft: #c7c7cc;
  --color-text-muted: #77777f;

  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);

  --color-accent: #7357ff;
  --color-accent-blue: #5277ff;

  /* ========================================
     TYPOGRAPHY
  ======================================== */

  --font-sans:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif;

  --font-size-xs: 0.6875rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.5rem;

  --font-size-display:
    clamp(4rem, 9vw, 10rem);

  /* ========================================
     SPACING
  ======================================== */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ========================================
     LAYOUT
  ======================================== */

  --container-width: 1440px;
  --container-padding: clamp(1.5rem, 4vw, 5rem);

  /* ========================================
     MOTION
  ======================================== */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --duration-fast: 200ms;
  --duration-medium: 500ms;
  --duration-slow: 900ms;

  /* ========================================
     LAYERS
  ======================================== */

  --z-base: 1;
  --z-content: 10;
  --z-navigation: 100;
  --z-overlay: 500;
  --z-loader: 1000;
}