/* GraphMobile design tokens — dealt by taste-skill (framed-sheet, light, seed 1494531685)
   with the brand palette kept. Every stylesheet references these; nothing downstream
   hard-codes a colour, a face or a radius. See .taste-skill/app-sheet.md for the sheet. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Faces. One text face; Plex Mono only for IDs, keys and table figures. */
  --font-sans: "IBM Plex Sans", Inter, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --sans: var(--font-sans);

  /* Type sizes from the sheet: title 22 · section 16 · kpi 28 · body 14 · small 12 */
  --fs-title: 22px; --fs-section: 16px; --fs-kpi: 28px; --fs-body: 14px; --fs-small: 12px;

  /* The frame. Warm stone, the colour of the anilox ceramic and the shop floor,
     one low-chroma step away from white. The sheet stays white. */
  --chrome: #f7f6f2;
  --sheet: #ffffff;
  --sheet-edge: #ebebe8;
  --sheet-radius: 16px;
  --sheet-inset: 8px;
  --raised: #fafaf8;
  --rule: #ededeb;
  --border: #e6e6e3;
  --control: #ffffff;
  --control-border: #d9d9d5;

  /* Ink */
  --text: #17171a;
  --text-secondary: #5a5a5e;
  /* Muted holds 4.5:1 on the sheet and on the chrome (it carries words: dates, meta, headers). */
  --text-muted: #6b6b70;

  /* Brand. Red only on the logo, the active tab underline and the one filled button. */
  --accent: #e53935;
  --accent-ink: #b71c1c;
  --accent-tint: #fdeceb;
  /* The filled button carries white words, so it takes the brand red one step
     deeper (#d32f2f, 4.98:1 with white); the logo uses the same red for its
     word. The 2px underline and the chart keep --accent. */
  --primary: #d32f2f;
  --primary-hover: var(--accent-ink);

  /* Status, on data only. Amber for waiting, green for confirmed, red for declined/failed, grey for done. */
  --ok: #1a6f45;      --ok-bg: #e7f4ec;   /* 5.4:1 on its pill, 6.1:1 on white */
  --warn: #9a6400;    --warn-bg: #fbf1dc;
  --bad: #b3261e;     --bad-bg: #fbe9e7;
  --off: #6b6b70;     --off-bg: #efefed;
  --success: var(--ok); --success-bg: var(--ok-bg); --success-border: #cfe8d8;
  --error: var(--bad);  --error-bg: var(--bad-bg);  --error-border: #f2c9c5;

  /* Charts: brand hue on the main series, then ink and a darkened amber. */
  --chart-1: #e53935; --chart-2: #17171a; --chart-3: #a86b00;

  /* Chrome geometry from the sheet */
  --sidebar-w: 228px;
  --header-h: 48px;
  --content-pad: 24px;
  --row-h: 48px;
  --control-h: 32px;
  --radius-control: 6px;
  --radius-card: 10px;

  /* Legacy names still used by older stylesheets */
  --bg: var(--chrome);
  --surface: var(--sheet);
  --surface-alt: var(--raised);
  --header-bg: var(--chrome);
  --text-primary: var(--text);
  --bg-elevated: var(--raised);
  --danger: var(--bad);
  --warning: var(--warn);
  --muted: var(--text-muted);
  --hover: var(--raised);
  --hover-bg: var(--raised);
  --active: #ecebe6;
}

/* Dark is a derivative of the same roles, never a second design. */
[data-theme="dark"] {
  --chrome: #141416; --sheet: #1c1c1f; --sheet-edge: #2a2a2e; --raised: #222226; --rule: #2a2a2e;
  --border: #2e2e33; --control: #1c1c1f; --control-border: #3a3a40;
  --text: #ececea; --text-secondary: #b4b4b0; --text-muted: #8e8e8a;
  --accent-tint: #3a1b1a;
  --ok: #58c48a; --ok-bg: #0f2a1b; --warn: #e0a93a; --warn-bg: #2d2208; --bad: #f08a83; --bad-bg: #3a1714; --off: #9a9a9e; --off-bg: #26262a;
  --success-border: #1d4a2e; --error-border: #5a2520;
  --chart-2: #ececea;
  --bg: var(--chrome); --surface: var(--sheet); --surface-alt: var(--raised); --header-bg: var(--chrome);
  --active: #2a2a2f;
}