/* xsnapshot design tokens: the single source for every page.
   Values and the reasoning behind them live in DESIGN.md (§2 colour, §3 type,
   §4 spacing, §6 components). Token names follow xsnap's, so the two sibling
   products stay legible as one family; the values give xsnapshot its own
   identity (phosphor-lime accent, neutral greys instead of X's blue greys).

   Contrast is measured on #000000 unless stated otherwise. */

@font-face {
  font-family: "JetBrains Mono NL";
  src: url("/assets/fonts/jetbrains-mono-nl-nerd-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono NL";
  src: url("/assets/fonts/jetbrains-mono-nl-nerd-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono NL";
  src: url("/assets/fonts/jetbrains-mono-nl-nerd-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono NL";
  src: url("/assets/fonts/jetbrains-mono-nl-nerd-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* canvas and ink */
  --bg: #000000;
  --text: #e8e9e6;            /* oklch(0.932 0.004 122)  17.23:1 */
  --text-strong: #ffffff;     /* 21:1, emphasis only */
  --muted: #80847e;           /* oklch(0.608 0.010 135)   5.52:1; 4.72:1 on --surface */
  --muted-raised: #9a9e98;    /* oklch(0.694 0.010 135)   7.72:1; muted copy on tinted layers */

  /* the one accent: phosphor lime, oklch(0.90 0.19 124) */
  --accent: #c4f252;          /* 16.17:1 */
  --accent-wash: rgba(196, 242, 82, 0.12);
  --accent-ink: #0b0c0b;      /* text on an accent fill, 14.9:1 */

  /* structure */
  --line: #2f3130;            /* 1.60:1 decorative hairline */
  --line-control: rgba(255, 255, 255, 0.35); /* 3.00:1 interactive edge */
  --line-control-hover: rgba(255, 255, 255, 0.55); /* 4.55:1 */
  --fill: rgba(255, 255, 255, 0.03);
  --fill-2: rgba(232, 233, 230, 0.1);
  --fill-2-hover: rgba(232, 233, 230, 0.16);
  --surface: #161716;         /* 1.17:1 raised chip / field fill */

  /* primary control */
  --btn: #e8e9e6;
  --btn-hover: #cfd1cc;
  --btn-ink: #0b0c0b;         /* 16.08:1 on --btn */

  /* status: never the accent hue, never colour alone */
  --ok: #3ad4aa;              /* oklch(0.781 0.140 170)  11.18:1 */
  --warn: #ffb400;            /* oklch(0.820 0.171  79)  11.78:1 */
  --danger: #ff5f57;          /* oklch(0.694 0.196  26)   7.03:1; 6.01:1 on --surface */
  --danger-hover: #d9302a;

  /* type */
  --font: "JetBrains Mono NL", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  /* radii */
  --r-card: 16px;
  --r-field: 12px;
  --r-chip: 4px;
  --r-pill: 9999px;

  /* chrome */
  --topbar-h: 53px;
  --topbar-bg: rgba(0, 0, 0, 0.72);
  --page-w: 1180px;

  /* one control spec: a 36px pill with a 44px hit area (base.css ::after) */
  --ctl-h: 36px;
  --ctl-pad: 8px 16px;
  --ctl-size: 15px;
  --ctl-weight: 700;
  --ctl-gap: 8px;
  --ctl-word: -0.25em; /* a mono space is 0.6em: labels read as words, not cells */
}