@charset "UTF-8";
/* ==========================================================================
   Design tokens — the only place where colours, gradients, radii, shadows
   and glass recipes are defined. Everything else refers to these names.

   Colour roles
   - Night / mist: dark and light surfaces.
   - Action (pink): call-to-action buttons only.
   - Alert (pink-red): threats and attacks in illustrations and the radar.
   - Accent (blue → violet): highlights, arrows, bullets, active states.
   - Link (royal blue): inline links on light surfaces.
   - Success (mint): "resolved" states.
   ========================================================================== */
@font-face {
  font-family: "InterVariable";
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Surfaces */
  --night: #070b28;
  --night-deep: #060920;
  --night-raised: #0b1033;
  --mist: #e3e8f4;
  --mist-line: #c6cfe5;

  /* Text */
  --ink: #0f1b4d;
  --text: #33425f;
  --muted: #52617c;
  --subtle: #6b7799;
  --on-dark: #ffffff;
  --on-dark-text: #d4ddf6;
  --on-dark-muted: #aebbe0;

  /* Brand */
  --blue: #2346e0;
  --violet: #a459ff;
  --violet-ink: #6b45e6;
  --periwinkle: #9db0ff;
  --lavender: #c9d4ff;

  /* Roles */
  --action: #ff2f70;
  --action-deep: #e0246a;
  --alert: #ff2f70;
  --success: #3ddc97;
  --link: var(--blue);
  --accent: var(--violet-ink);
  --accent-on-dark: var(--periwinkle);

  /* Gradients */
  --gradient-signal: linear-gradient(90deg, #4d7cff, #a459ff);
  --gradient-signal-v: linear-gradient(180deg, #4d7cff, #a459ff);
  --gradient-action: linear-gradient(135deg, var(--action), var(--action-deep));
  --gradient-tile: linear-gradient(140deg, var(--blue), var(--violet));
  --gradient-highlight: linear-gradient(95deg, #b7c4ff 0%, #c79bff 35%, #8fb0ff 70%, #b7c4ff 100%);
  --gloss: linear-gradient(180deg, rgb(255 255 255 / 22%), rgb(255 255 255 / 0%) 55%);
  --hero-bg: radial-gradient(60% 80% at 85% 15%, #2346e059, transparent 70%), radial-gradient(50% 60% at 100% 100%, #a459ff38, transparent 70%), radial-gradient(40% 50% at 0% 100%, #4d7cff1f, transparent 70%), var(--night);
  --night-bg: radial-gradient(55% 70% at 100% 0%, #2346e04d, transparent 70%), radial-gradient(45% 60% at 0% 100%, #a459ff26, transparent 70%), var(--night);
  --mist-bg: radial-gradient(45% 38% at 8% 40%, #c9d2ffcc 0, transparent 70%), radial-gradient(40% 36% at 94% 64%, #ddd1ffcc 0, transparent 70%), var(--mist);
  --mist-alt-bg: radial-gradient(42% 38% at 92% 38%, #d2cbffcc 0, transparent 70%), radial-gradient(45% 38% at 4% 66%, #c7d4ffcc 0, transparent 70%), var(--mist);
  --grid-lines: linear-gradient(#91a6ff0c 1px, transparent 1px), linear-gradient(90deg, #91a6ff0c 1px, transparent 1px);

  /* Glass */
  --glass-light: linear-gradient(155deg, rgb(255 255 255 / 78%) 0%, rgb(242 246 255 / 52%) 52%, rgb(234 239 255 / 64%) 100%);
  --glass-light-border: rgb(255 255 255 / 72%);
  --glass-light-shadow: inset 0 1px 0 rgb(255 255 255 / 95%), inset 0 -1px 0 rgb(80 100 180 / 12%), 0 22px 44px -22px rgb(28 40 110 / 38%), 0 2px 6px rgb(28 40 110 / 6%);
  --glass-light-shadow-hover: inset 0 1px 0 #fff, inset 0 -1px 0 rgb(80 100 180 / 12%), 0 30px 54px -24px rgb(28 40 110 / 45%), 0 2px 8px rgb(28 40 110 / 8%);
  --glass-dark: linear-gradient(155deg, rgb(150 170 255 / 20%) 0%, rgb(24 34 96 / 38%) 50%, rgb(52 30 112 / 40%) 100%);
  --glass-dark-border: rgb(200 212 255 / 20%);
  --glass-dark-shadow: inset 0 1px 0 rgb(255 255 255 / 16%), inset 0 -1px 0 rgb(0 0 0 / 28%), 0 26px 54px -24px rgb(2 6 30 / 70%);
  --glass-blur: blur(16px) saturate(160%);

  /* Shape */
  --r-pill: 999px;
  --r-panel: 34px;
  --r-card: 28px;
  --r-row: 20px;
  --r-field: 16px;
  --r-tile: 30%;

  /* Type */
  --font: "InterVariable", Inter, system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --wrap: 1360px;
  --gutter: 40px;
  --section-y: 72px;
  --header-h: 84px;
  --header-h-compact: 68px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

@media (max-width: 760px) {
  :root {
    --gutter: 20px;
    --section-y: 48px;
    --header-h: 72px;
    --header-h-compact: 62px;
  }
}

@media (max-width: 420px) {
  :root {
    --gutter: 16px;
  }
}