/* THE theme file (skin hook 1). Every colour, font, size, spacing, border and radius the app uses
   lives here as a custom property. app.css and the views use ONLY var(--...). A skin (the pixel-art
   game layer) replaces or overrides this one file; components never hard-code a value.
   PTPF look: deep purple ground; lime is RATIONED (outlines and small marks, never a big fill). */
:root {
  /* colour */
  --c-bg: #1A1228;
  --c-bar: #281D3B;
  --c-surface: #33264A;
  --c-field: #281D3B;
  --c-line: #55527A;
  --c-text: #F5F4F6;
  --c-muted: #CABEDF;
  --c-accent: #D0FF00;      /* lime: primary buttons, focus, the current tab */
  --c-warn: #FFC900;        /* gold: escalation, alarms, shadow on */
  --c-danger: #FF00B2;      /* pink: shadow off (real sends) */

  /* type */
  --font-body: Barlow, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: var(--font-body);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-tiny: 13px;
  --fs-tag: 12px;
  --fs-h1: 15px;
  --fs-h2: 19px;
  --fs-num: 28px;
  --fw-head: 800;
  --fw-bold: 700;
  --lh-body: 1.45;
  --track-head: 0.06em;

  /* space */
  --gutter: 16px;
  --gap: 8px;
  --gap-l: 12px;
  --pad-card: 14px;
  --max-width: 640px;
  --tap-min: 44px;

  /* border and shape */
  --border-w: 1px;
  --border-w-strong: 2px;
  --border-w-ask: 3px;
  --radius: 12px;
  --radius-field: 8px;
  --radius-btn: 10px;
  --radius-pill: 999px;

  /* icons (skin hook 2) */
  --icon-size: 18px;
  --icon-gap: 6px;
}