:root {
  --color-primary: #0f3a66;
  --color-primary-dark: #081f38;
  --color-accent: #2f96e0;
  --color-accent-dark: #1670b0;
  --color-accent-bright: #6cc7ff;
  --color-brand-green: #39d353;
  --color-text: #e9eef6;
  --color-text-muted: #8fa0ba;
  --color-bg: #080f1a;
  --color-bg-sub: #0d1a2c;
  --color-bg-elevated: #11213a;
  --color-border: rgba(255, 255, 255, 0.1);
  --color-success: #3ddc73;
  --color-error: #ff6b6b;
  --font-family-base: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  --font-family-en: "Space Grotesk", var(--font-family-base);
  --font-family-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --glow-accent: 0 0 0 1px rgba(47, 150, 224, 0.4), 0 24px 48px -24px rgba(47, 150, 224, 0.5), 0 0 40px -8px rgba(47, 150, 224, 0.35);
}

html {
  background-color: var(--color-bg);
  overflow-x: hidden;
}

body {
  font-family: var(--font-family-base);
  color: var(--color-text);
  background-color: transparent;
  font-size: 16px;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

p {
  text-wrap: pretty;
}

a {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

a:hover {
  opacity: 0.75;
}

::selection {
  background-color: var(--color-accent);
  color: #ffffff;
}