/* Dreamunity Design System — Night Bloom tokens */
:root {
  color-scheme: dark;

  /* Primitive colors */
  --du-color-night-950: #06040e;
  --du-color-night-900: #090614;
  --du-color-night-850: #100a1f;
  --du-color-night-800: #151027;
  --du-color-night-700: #26184b;
  --du-color-violet-500: #a982ff;
  --du-color-violet-300: #d5b9ff;
  --du-color-pink-400: #ff86cf;
  --du-color-cyan-300: #7be7f6;
  --du-color-white: #fbf8ff;
  --du-color-success: #8fe8c8;
  --du-color-danger: #ff8cae;

  /* Semantic colors */
  --du-color-background: var(--du-color-night-900);
  --du-color-background-deep: var(--du-color-night-950);
  --du-color-surface: rgba(22, 14, 40, 0.76);
  --du-color-surface-solid: var(--du-color-night-800);
  --du-color-surface-raised: rgba(34, 22, 57, 0.98);
  --du-color-surface-subtle: rgba(20, 12, 38, 0.42);
  --du-color-text-primary: var(--du-color-white);
  --du-color-text-secondary: #d9d1e8;
  --du-color-text-muted: #aaa2c1;
  --du-color-border: rgba(228, 215, 255, 0.14);
  --du-color-border-strong: rgba(228, 215, 255, 0.24);
  --du-color-action-primary: var(--du-color-violet-500);
  --du-color-action-primary-hover: #b894ff;
  --du-color-action-on-primary: #160b2d;
  --du-color-action-primary-soft: rgba(152, 103, 255, 0.14);
  --du-color-action-primary-soft-hover: rgba(152, 103, 255, 0.26);
  --du-color-accent: var(--du-color-cyan-300);
  --du-color-accent-secondary: var(--du-color-pink-400);
  --du-color-focus: var(--du-color-cyan-300);
  --du-color-qr-surface: #ffffff;
  --du-color-qr-card-border: rgba(213, 185, 255, 0.3);
  --du-color-qr-card-gradient: linear-gradient(145deg, rgba(113, 82, 237, 0.4), rgba(38, 24, 75, 0.82));

  /* Typography */
  --du-font-display: Inter, "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
  --du-font-body: Inter, "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
  --du-font-size-meta: 0.75rem;
  --du-font-size-body: 1rem;
  --du-font-size-lead: clamp(1rem, 1.7vw, 1.15rem);
  --du-font-size-section: clamp(2rem, 4.3vw, 3.55rem);
  --du-font-size-display: clamp(2.75rem, 5vw, 4.35rem);
  --du-leading-tight: 1.08;
  --du-leading-body: 1.6;
  --du-leading-readable: 1.9;

  /* 4px base / 8px rhythm */
  --du-space-1: 0.25rem;
  --du-space-2: 0.5rem;
  --du-space-3: 0.75rem;
  --du-space-4: 1rem;
  --du-space-5: 1.5rem;
  --du-space-6: 2rem;
  --du-space-7: 3rem;
  --du-space-8: 4rem;
  --du-space-9: 5rem;
  --du-space-10: 7.5rem;

  /* Shape */
  --du-radius-sm: 0.625rem;
  --du-radius-md: 0.875rem;
  --du-radius-lg: 1.375rem;
  --du-radius-xl: 1.75rem;
  --du-radius-pill: 999px;

  /* Elevation and glow */
  --du-shadow-card: 0 17px 42px rgba(0, 0, 0, 0.22);
  --du-shadow-floating: 0 20px 55px rgba(0, 0, 0, 0.38);
  --du-shadow-hero: 0 28px 72px rgba(0, 0, 0, 0.5), 0 0 48px rgba(144, 103, 255, 0.2);
  --du-shadow-qr-card: 0 15px 30px rgba(19, 8, 48, 0.25);
  --du-glow-violet: 0 0 35px rgba(137, 89, 255, 0.22);
  --du-glow-cyan: 0 0 15px rgba(123, 231, 246, 0.8);

  /* Motion */
  --du-motion-fast: 140ms;
  --du-motion-base: 180ms;
  --du-motion-slow: 280ms;
  --du-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --du-ease-emphasis: cubic-bezier(0.34, 1.2, 0.64, 1);

  /* Layout */
  --du-layout-max-width: 1180px;
  --du-layout-gutter: 24px;
  --du-breakpoint-tablet: 980px;
  --du-breakpoint-mobile: 720px;

  /* Layering */
  --du-z-base: 0;
  --du-z-content: 1;
  --du-z-header: 10;
  --du-z-overlay: 20;
}