@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/comfortaa-latin-700-v47.woff2') format('woff2');
}

:root {
  /* Nocturne tokens — the palette the design system defines, kept here so
     page stylesheets never hardcode a color. */
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-accent-300: #d2cefd;
  --color-void: #05050a;

  /* The lit room every page opens in: a pool of surface light at the centre,
     falling off to the background and then darker than it at the edges. */
  --gradient-scene: radial-gradient(ellipse at 50% 45%,
      var(--color-surface) 0%,
      var(--color-bg) 55%,
      color-mix(in srgb, var(--color-bg) 85%, black) 100%);

  --font-display: 'Comfortaa', sans-serif;
  --font-size-display: 64px;
  --font-size-display-small: 40px;
  --font-size-label: 16px;
}

body {
  margin: 0;
  background-color: var(--color-bg);
}

.container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  background-color: var(--color-bg);
  background-image: var(--gradient-scene);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--font-size-display);
  font-weight: 700;
}

.text {
  position: relative;
  z-index: 2;
  text-align: center;
  text-shadow: 0 0 36px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

@media (max-width: 640px) {
  .container {
    font-size: var(--font-size-display-small);
  }
}