:root {
  /* backgrounds */
  --bg-base: #06080e;
  --bg-alt: #080b13;
  --bg-card: #0a0e16;
  --bg-contact: #06112b;

  /* text */
  --text-primary: #e9edf5;
  --text-heading: #f6f8fc;
  --text-secondary: #c4ccdb;
  --text-muted: #aeb6c6;
  --text-faint: #8b94a8;
  --text-copyright: #6f7689;

  /* accents */
  --accent-1: #1146d6;
  --accent-2: #2f7bff;
  --accent-3: #4f9bff;
  --accent-4: #54a0ff;
  --heading-accent: #3d8bff;
  --card-title: #6ba2f6;

  --accent-gradient: linear-gradient(110deg, var(--accent-1) 0%, var(--accent-2) 55%, var(--accent-4) 100%);

  /* borders */
  --border-faint: rgba(255, 255, 255, 0.07);
  --border-accent: rgba(120, 150, 210, 0.35);
  --border-accent-strong: rgba(120, 150, 210, 0.4);

  /* form feedback */
  --danger: #ff6b6b;
  --success: #4ddb8e;

  /* fonts */
  --font-serif: 'Noto Serif JP', serif;
  --font-sans: 'Noto Sans JP', sans-serif;
  --font-en: 'Lora', serif;

  /* layout */
  --container: 1440px;
  --gutter: 60px;
}

@media (max-width: 1023px) {
  :root {
    --gutter: 32px;
  }
}

@media (max-width: 767px) {
  :root {
    --gutter: 20px;
  }
}