:root {
  /* Surface */
  --bg-0: #0B0E13;
  --bg-1: #11151D;
  --bg-2: #171C26;
  --glass: rgba(255, 255, 255, 0.06);
  --glass-hover: rgba(255, 255, 255, 0.09);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-blur: 18px;

  /* Brand */
  --accent: #3DDC97;
  --accent-deep: #1D9E75;
  --info: #4FA3E3;
  --warn: #EFA13B;
  --danger: #E24B4A;
  --grad-brand: linear-gradient(135deg, #3DDC97 0%, #4FA3E3 100%);

  /* Text */
  --tx-1: #F2F4F8;
  --tx-2: #9BA3B4;
  --tx-3: #5E6675;

  /* Elevation — layered, dark-native */
  --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.28);
  --shadow-2: 0 2px 4px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.38);
  --shadow-3: 0 4px 8px rgba(0,0,0,.42), 0 24px 64px rgba(0,0,0,.55);
  --glow-accent: 0 0 40px rgba(61,220,151,.12);
  --glow-info: 0 0 40px rgba(79,163,227,.10);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 560ms;

  /* Shape */
  --radius: 16px;
  --radius-lg: 24px;
  --radius-sm: 8px;

  /* Typography scale — fluid */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --fs-hero: clamp(34px, 4.6vw, 60px);
  --fs-section: clamp(20px, 2.4vw, 28px);

  --font-display: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Z-index ladder */
  --z-ambient: 0;
  --z-content: 10;
  --z-nav: 100;
  --z-overlay: 200;
  --z-toast: 300;

  /* Layout */
  --sidebar-w: 240px;
  --content-max: 1140px;
  --gutter: clamp(20px, 4vw, 40px);
}