:root {
  /* Colors */
  --color-bg:           #06090d;
  --color-bg-card:      #080e16;
  --color-border:       #0d1e2e;
  --color-ocean:        #0a3d62;
  --color-ocean-light:  #185fa5;
  --color-ocean-mid:    #4a8ab5;
  --color-text-primary: #e8eef5;
  --color-text-muted:   #8aaccc;
  --color-text-dim:     #2a4a65;
  --color-text-label:   #1a3a55;
  --color-accent:       #c8daea;

  /* Typography */
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Montserrat', system-ui, sans-serif;

  /* Spacing */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   32px;
  --space-lg:   64px;
  --space-xl:   96px;

  /* Transitions */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --duration:   0.3s;

  /* Layout */
  --max-width:  1280px;
  --gutter:     40px;
}

@media (max-width: 768px) {
  :root {
    --gutter: 24px;
    --space-lg: 48px;
  }
}