/* ==========================================================================
   Asynk IO — design tokens
   Light "paper" system: off-white page, white cards, near-black ink, one loud
   lime accent, plus cyan/violet used sparingly for informational accents.

   Type is three roles, all SIL Open Font License, all self-hosted:
     Inter            display + body
     Pixelify Sans    the pixel "chrome" — labels, tags, nav, buttons
     JetBrains Mono   the console, where column alignment matters
   ========================================================================== */

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

@font-face {
  font-family: "Pixelify Sans";
  src: url("../assets/fonts/pixelify-sans.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/jetbrains-mono.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Kalam";
  src: url("../assets/fonts/kalam.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* ---- paper & ink ---------------------------------------------------- */
  --paper: #f5f5f1;
  --paper-2: #eeeeea;
  --surface: #ffffff;
  --surface-2: #fafaf7;
  --ink: #0a0a0b;
  --ink-2: #4b4b52;
  --ink-3: #7c7c85;
  --line: #e3e3da;
  --line-2: #cdcdc1;

  /* ---- accents -------------------------------------------------------- */
  --lime: #cfff55;
  --lime-deep: #b6f02a;
  --lime-soft: #f0fbda;
  --lime-shadow: #e3edcb;
  --lime-ink: #1b2400;

  --cyan: #0d7f8c;
  --cyan-bright: #12a5b5;
  --cyan-soft: #dcf1f3;

  --violet: #6b3fd4;
  --violet-soft: #ede6fb;

  --amber: #9a6104;
  --red: #c0392b;

  /* ---- console (the one dark surface) --------------------------------- */
  --term-bg: #0e1013;
  --term-bg-2: #161a20;
  --term-bg-3: #1e232b;
  --term-ink: #e9e9e3;
  --term-dim: #868c96;
  --term-line: #262c35;
  --term-lime: #cfff55;
  --term-cyan: #6fe3ef;
  --term-violet: #c4a6ff;

  /* ---- type ----------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;
  --font-pixel: "Pixelify Sans", "Inter", ui-monospace, monospace;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-hand: "Kalam", ui-rounded, cursive;

  /* ---- radii ---------------------------------------------------------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* ---- elevation ------------------------------------------------------ */
  --shadow-tile: 0 1px 2px rgba(16, 16, 20, 0.04),
    0 6px 16px rgba(16, 16, 20, 0.06);
  --shadow-lift: 0 14px 34px rgba(16, 16, 20, 0.1);
  --shadow-btn: 0 4px 0 0 var(--lime-shadow);
  --shadow-console: 0 18px 44px rgba(14, 16, 19, 0.22);

  /* ---- rhythm --------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --gutter: 20px;
  --maxw: 1440px;
  --header-h: 76px;

  /* Pixel-sprite accent. Any ancestor may override this; it inherits into
     the <use> shadow tree, which is why the sprite fills use var() and not a
     hard-coded colour. */
  --px-accent: var(--lime);
}

@media (min-width: 900px) {
  :root {
    --gutter: 40px;
    --header-h: 84px;
  }
}

@media (min-width: 1280px) {
  :root {
    --gutter: 56px;
  }
}