/* ==========================================================================
   Design tokens — the single source for colour, type, space, shape, motion.
   Everything else in css/ reads from here; no raw hex values elsewhere.

   The palette is lifted from the logo: the wordmark's ice blue ("Algorithm")
   and its gold-to-lime fill ("Oasis"), set against a blue-black night so both
   stay luminous. Night is never pure black — depth comes from the surface
   ladder below, not from shadows.
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* The game's own lettering. Used only for HUD-style labels and numerals —
   never for body copy or headings (see .hud in base.css). */
@font-face {
  font-family: "Minecraft";
  src: url("../fonts/MinecraftRegular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Surface ladder: world → base → raised → interactive → active --- */
  --night-950: #05080f;
  --night-900: #090e18;
  --night-800: #0e1623;
  --night-700: #152031;
  --night-600: #1d2c42;
  --night-500: #2a3d59;

  /* --- Ink --- */
  --ink: #eef3fa;
  --ink-soft: #b7c3d4;
  --ink-mute: #8492a8;
  --ink-on-accent: #10180a;

  /* --- Brand: Oasis (primary action) --- */
  --oasis-gold: #f7d53b;
  --oasis-lime: #b6e332;
  --oasis-deep: #6f9d16;
  --oasis-grad: linear-gradient(180deg, var(--oasis-gold) 0%, var(--oasis-lime) 100%);

  /* --- Brand: Algorithm (information, links, live data) --- */
  --algo-sky: #8ad6ff;
  --algo-blue: #2f9bf0;
  --algo-deep: #12508f;

  /* --- Semantic --- */
  --online: #6fe36a;
  --offline: #ff6b6b;
  --pending: var(--ink-mute);
  --nether: #e8603c;
  --end: #b88cf5;

  /* --- Lines --- */
  --line: rgba(150, 190, 255, 0.11);
  --line-strong: rgba(150, 190, 255, 0.22);
  --line-accent: rgba(182, 227, 50, 0.45);

  /* --- Type --- */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-hud: "Minecraft", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.125rem, 0.6vw + 1rem, 1.3125rem);
  --text-xl: clamp(1.375rem, 1.2vw + 1.05rem, 1.875rem);
  --text-2xl: clamp(1.75rem, 2.4vw + 1.1rem, 2.75rem);
  --text-3xl: clamp(2.25rem, 4.2vw + 1rem, 4.25rem);
  --text-4xl: clamp(2.75rem, 6.5vw + 0.75rem, 6rem);

  /* --- Space (4px base) --- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4.5rem, 10vw, 8.5rem);

  /* --- Layout --- */
  --w-page: 76rem;
  --w-prose: 44rem;
  --nav-h: 4.25rem;

  /* --- Shape. The site's corners are stepped like pixel art, not rounded:
     --notch is the size of that one-pixel step (see .block in base.css). --- */
  --notch: 6px;
  --notch-sm: 3px;

  /* --- Items. Pixel-art sprites are drawn 16×16; they are only ever shown
     at whole multiples of that so every source pixel stays square. --- */
  --item: 1rem;
  --item-2x: calc(var(--item) * 2);
  --item-3x: calc(var(--item) * 3);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 140ms;
  --t-base: 260ms;
  --t-slow: 640ms;

  /* --- Layers --- */
  --z-base: 1;
  --z-raised: 10;
  --z-nav: 100;
  --z-sheet: 200;
  --z-toast: 300;
}