/* CyberDesigner Masterpiece 2026/27 — Design Tokens */
:root {
  /* Base */
  --cdx-void: #07090d;
  --cdx-ink: #0b0e14;
  --cdx-surface: #10151d;
  --cdx-elevated: #161d28;
  --cdx-line: rgba(242, 244, 247, 0.08);
  --cdx-line-strong: rgba(242, 244, 247, 0.16);

  /* Content */
  --cdx-text: #f2f4f7;
  --cdx-muted: #9aa3b2;
  --cdx-faint: #6b7382;

  /* Brand */
  --cdx-blue: #3d9eff;
  --cdx-blue-deep: #1a6fd4;
  --cdx-cyan: #5ec8ff;
  --cdx-signal: #3d9eff;

  /* Semantic */
  --cdx-good: #3ecf8e;
  --cdx-bad: #f07178;

  /* Type */
  --cdx-font: "DM Sans", "Segoe UI", sans-serif;
  --cdx-display: "Outfit", "DM Sans", sans-serif;
  --cdx-mono: ui-monospace, "Cascadia Code", monospace;

  /* Space — 8px rhythm */
  --cdx-space-1: 0.25rem;
  --cdx-space-2: 0.5rem;
  --cdx-space-3: 0.75rem;
  --cdx-space-4: 1rem;
  --cdx-space-5: 1.5rem;
  --cdx-space-6: 2rem;
  --cdx-space-7: 3rem;
  --cdx-space-8: 4rem;
  --cdx-space-9: 6rem;
  --cdx-space-10: 8rem;

  /* Layout */
  --cdx-max: 1120px;
  --cdx-wide: 1280px;
  --cdx-pad: clamp(1.25rem, 4vw, 2rem);
  --cdx-gutter: clamp(1rem, 2.5vw, 1.5rem);
  --cdx-nav: 4.5rem;
  --cdx-read: 38rem;

  /* Radius / shadow / motion */
  --cdx-r: 0.5rem;
  --cdx-r-sm: 0.25rem;
  --cdx-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  --cdx-shadow-nav: 0 8px 32px rgba(0, 0, 0, 0.4);
  --cdx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cdx-fast: 160ms;
  --cdx-normal: 320ms;
  --cdx-slow: 640ms;

  --cdx-z-nav: 100;
  --cdx-z-menu: 110;
  --cdx-z-skip: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --cdx-fast: 1ms;
    --cdx-normal: 1ms;
    --cdx-slow: 1ms;
  }
}