/* SenseCraft HMI「番工」— 4-level grayscale tokens
   Target: 800×480 e-ink / SenseCraft HMI
   DEMO only — no production bindings
   Aligns with Spec v0.1.1 + layout-sketch.jpg (elevated) */

:root {
  /* —— Color (exactly 4 levels) —— */
  --ink-0: #FFFFFF; /* paper / background */
  --ink-1: #AAAAAA; /* muted / soft hairline / tertiary ETA */
  --ink-2: #555555; /* secondary text / section labels */
  --ink-3: #000000; /* primary ink / inverted fills */

  --color-paper: var(--ink-0);
  --color-muted: var(--ink-1);
  --color-secondary: var(--ink-2);
  --color-ink: var(--ink-3);

  /* —— Spacing (4/8/12/16/24) —— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;

  /* —— Radius (prefer 0 for e-ink) —— */
  --radius-0: 0;
  --radius-sm: 2px; /* max; use sparingly */

  /* —— Border —— */
  --border-w: 1px;
  --border-ink: var(--border-w) solid var(--ink-3);
  --border-soft: var(--border-w) solid var(--ink-2);
  --border-muted: var(--border-w) solid var(--ink-1);

  /* —— Type —— */
  --font-cjk: "Noto Sans TC", "Source Han Sans TC", "PingFang HK", "Microsoft JhengHei", sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* Do NOT use Inter / Roboto as primary */

  --fs-section: 10px;      /* MAIN / SECONDARY / WEATHER labels */
  --fs-label: 11px;        /* 氣溫／體感／相對濕度 / 電池 */
  --fs-body: 13px;         /* secondary destination */
  --fs-dest-primary: 16px; /* primary column destination */
  --fs-badge-sm: 14px;     /* secondary route badge */
  --fs-badge: 22px;        /* primary route badge */
  --fs-eta-3: 12px;        /* third ETA */
  --fs-eta-2: 14px;        /* second ETA */
  --fs-eta-1: 28px;        /* primary next ETA (clock hh:mm) */
  --fs-temp: 28px;         /* weather temp value */
  --fs-clock: 16px;        /* top bar clock */
  --fs-title: 15px;        /* 「番工」 */
  --fs-chip: 10px;         /* 「最後班」「原定班」 */

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.4;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* —— Layout regions (800×480) —— */
  --artboard-w: 800px;
  --artboard-h: 480px;
  --topbar-h: 40px;
  --sidebar-w: 220px;      /* weather + device */
  --main-w: 580px;         /* 800 − 220 */
  --main-band-h: 242px;    /* ~55% of body (440px) */
  --secondary-band-h: 198px;
}