/* Gen-KitchenManagement design tokens — brand palette from TOTO_SYSTEM_PLAN.md §3 */
@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/bebas-neue-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* surfaces */
  --bg: #1b1d1f;
  --surface: #232629;
  --surface-2: #2b2f33;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* text */
  --ink: #eceef0;
  --muted: #9ba4ac;

  /* brand + status */
  --amber: #f2a93b;
  --amber-soft: rgba(242, 169, 59, 0.14);
  --amber-ink: #1b1d1f;
  --ok: #5fc98f;
  --ok-soft: rgba(95, 201, 143, 0.14);
  --warn: #f2a93b;
  --warn-soft: rgba(242, 169, 59, 0.14);
  --bad: #f2786a;
  --bad-soft: rgba(242, 120, 106, 0.15);
  --info: #6cb4f2;
  --info-soft: rgba(108, 180, 242, 0.14);

  /* charts — series 1 is the data-viz palette's blue (dark step), validated on --surface: lightness band, chroma,
     4.2:1 contrast. The brand amber is too light for that band and doubles as the warn colour, so it stays out of charts.
     The trend line is plain ink, so it never competes with a status colour. */
  --viz-1: #3987e5;
  --viz-1-hot: #6da7ec;
  --viz-trend: #eceef0;
  --viz-grid: rgba(255, 255, 255, 0.07);
  --viz-axis: rgba(255, 255, 255, 0.2);

  /* type */
  --font-head: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* shape + layout */
  --radius: 14px;
  --radius-sm: 10px;
  --rail-w: 216px;
  --gutter: 22px;
  --tap: 44px;
}