@font-face {
  font-family: "Octo";
  src: url("../../assets/fonts/octosquares-bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../../assets/fonts/inter-regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../../assets/fonts/inter-semibold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  --color-bg: #00102d;
  --color-bg-deep: #000b21;
  --color-panel: #001a49;
  --color-panel-soft: rgba(0, 20, 58, 0.72);
  --color-cyan: #00bfdc;
  --color-ice: #9ceef6;
  --color-white: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.72);
  --color-line: rgba(255, 255, 255, 0.19);
  --font-display: "Octo", sans-serif;
  --font-body: "Inter", Arial, sans-serif;
  --page-gutter: clamp(16px, 2vw, 32px);
  --content-width: 1440px;
  --radius-large: 24px;
  --transition: 220ms ease;
}