/* ========================================
   Design Tokens: gero-heaven (Dark Mode)
   Blue-Shifted Dark, Jupiter-inspired
   ======================================== */
:root {
  /* Color: Blue-Shifted Dark (Jupiter-inspired, moderate) */
  --color-bg: #0a1520;
  --color-surface: #101e2c;
  --color-surface-hover: #182838;
  --color-border: #1e3448;
  --color-text: #d0dce8;
  --color-text-muted: #7090a8;
  --color-accent: #c7f284;
  --color-accent-hover: #d4f7a0;
  --color-accent-dim: rgba(199, 242, 132, 0.10);
  --color-accent-bg: rgba(199, 242, 132, 0.08);
  --color-accent-bg-hover: rgba(199, 242, 132, 0.15);
  --color-accent-border: rgba(199, 242, 132, 0.22);
  --color-accent-surface: #101e2c;
  --color-accent-text: #c7f284;
  --color-link: #58c4dc;
  --color-link-hover: #7ad4e8;
  --color-cta: #c7f284;
  --color-cta-hover: #d4f7a0;
  --color-cta-text: #0a1520;
  --color-glow: rgba(199, 242, 132, 0.15);
  --color-glow-link: rgba(88, 196, 220, 0.15);
  --color-tag-bg: rgba(88, 196, 220, 0.10);
  --color-tag-border: rgba(88, 196, 220, 0.22);

  /* Overlays & Glass (theme-dependent) */
  --color-overlay: rgba(10, 21, 32, 0.75);
  --color-overlay-heavy: rgba(10, 21, 32, 0.90);
  --color-overlay-modal: rgba(5, 10, 18, 0.6);
  --color-surface-gradient: rgba(16, 30, 44, 0.95);
  --color-surface-glass: rgba(16, 30, 44, 0.10);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-size-base: 16px;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Layout */
  --container-width: 1140px;
  --container-wide: 1140px;
  --article-width: 800px;
}