:root{
  /* Brand */
  --ds-color-bg:#08070e;
  --ds-color-surface:#12101d;
  --ds-color-surface-raised:#21152f;
  --ds-color-primary:#9b5fff;
  --ds-color-primary-600:#7130c3;
  --ds-color-primary-500:#8540d6;
  --ds-color-primary-300:#d3afff;
  --ds-color-border:#78509c;
  --ds-color-text:#f7f3ff;
  --ds-color-text-muted:#c0b6cc;

  /* Typography */
  --ds-font-display:'Inter','Segoe UI',Arial,sans-serif;
  --ds-font-body:'Inter',Arial,sans-serif;
  --ds-font-ui:'Inter','Segoe UI',Arial,sans-serif;
  --ds-title-gradient:linear-gradient(180deg,#ffffff 0%,#f3f0ff 34%,#c7adff 66%,#8f73ff 100%);
  --ds-title-glow:0 0 34px rgba(168,134,255,.26),0 8px 30px rgba(0,0,0,.45);
  --ds-type-xs:12px;
  --ds-type-sm:14px;
  --ds-type-md:16px;
  --ds-type-lg:20px;
  --ds-type-xl:28px;
  --ds-type-2xl:38px;
  --ds-type-hero:clamp(58px,12vw,102px);
  --ds-line-tight:1.06;
  --ds-line-body:1.65;

  /* 8pt spacing grid */
  --ds-space-1:8px;
  --ds-space-2:16px;
  --ds-space-3:24px;
  --ds-space-4:32px;
  --ds-space-5:40px;
  --ds-space-6:48px;
  --ds-space-8:64px;
  --ds-space-10:80px;
  --ds-space-12:96px;

  /* Shape and effects */
  --ds-cut-sm:8px;
  --ds-cut-md:18px;
  --ds-shadow-glow:0 0 32px rgba(163,106,230,.38);
  --ds-shadow-panel:0 18px 55px rgba(0,0,0,.24);
  --ds-shadow-panel-strong:0 22px 70px rgba(0,0,0,.48),0 0 38px rgba(155,95,255,.16);
  --ds-border-subtle:rgba(211,175,255,.28);
  --ds-border-strong:rgba(211,175,255,.68);
  --ds-panel-glass:linear-gradient(115deg,rgba(15,9,22,.84),rgba(31,18,45,.62));
  --ds-panel-highlight:radial-gradient(ellipse at 78% 38%,rgba(155,95,255,.22),transparent 58%);
  --ds-ease:cubic-bezier(.22,1,.36,1);
  --ds-duration-fast:180ms;
  --ds-duration-base:350ms;

  /* Breakpoints */
  --ds-bp-sm:360px;
  --ds-bp-md:760px;
  --ds-bp-lg:1050px;
  --ds-bp-xl:1500px;
}