:root {
  /* Color */
  --color-bg: #0d0d0d;
  --color-bg-alt: #131313;
  --color-surface: #1a1a1a;
  --color-surface-2: #202020;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  --color-text: #f5f5f5;
  --color-text-muted: #a6a6a6;
  --color-text-faint: #767676;
  --color-text-on-light: #0d0d0d;

  --color-accent-pink: #e0257e;
  --color-accent-orange: #ff7a45;
  --color-accent-yellow: #ffd84d;
  --color-accent-cyan: #35c7f0;

  --gradient-primary: linear-gradient(135deg, var(--color-accent-pink), var(--color-accent-orange));
  --gradient-primary-wide: linear-gradient(
    100deg,
    var(--color-accent-pink) 0%,
    var(--color-accent-orange) 50%,
    var(--color-accent-pink) 100%
  );
  --gradient-hero-glow: radial-gradient(circle at 70% 30%, rgba(224, 37, 126, 0.35), transparent 60%);
  --gradient-stripe: linear-gradient(
    100deg,
    var(--color-accent-pink) 0%,
    var(--color-accent-orange) 25%,
    var(--color-accent-yellow) 50%,
    var(--color-accent-cyan) 75%,
    var(--color-accent-pink) 100%
  );

  /* Typography */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;

  --step-xs: 0.875rem;   /* 14px */
  --step-sm: 1rem;       /* 16px */
  --step-md: 1.125rem;   /* 18px */
  --step-lg: 1.5rem;     /* 24px */
  --step-xl: 2rem;       /* 32px */
  --step-2xl: 3rem;      /* 48px */
  --step-3xl: 4rem;      /* 64px */
  --step-4xl: 5.5rem;    /* 88px */

  /* Spacing */
  --space-section: 160px;
  --space-section-mobile: 72px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;

  /* Shape */
  --radius-pill: 999px;
  --radius-card: 22px;
  --radius-card-sm: 14px;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.4s;
  --dur-slow: 0.8s;

  /* Layout */
  --container-max: 1320px;
  --header-h: 88px;
}