@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/* The only file allowed to contain a colour, radius, shadow or font literal. Everything else uses these. */
:root {
  /* palette (docs/ui-spec.md, Colour tokens) */
  --white: #FFFFFF;
  --n50: #F6F7F5;
  --n200: #DEE0DC;
  --n600: #5E6258;
  --ink: #15171A;
  --green: #6FCF4B;
  --green-tint: #E6F6DF;
  --green-text: #387920;
  --amber: #9A5B00;
  --alert: #A92348;

  /* WhatsApp message preview: imitates WhatsApp's own look, so it keeps WhatsApp's colours */
  --wa-chat-bg: #EFEAE2;
  --wa-link: #0B73A8;
  --wa-media-bg: #E9EDEF;
  --wa-media-fg: #888888;

  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* roles, built only from the palette */
  --bg-app: var(--white);
  --bg-panel: var(--white);
  --bg-hover: var(--n50);
  --color-text: var(--ink);
  --color-text-muted: var(--n600);
  --color-border: var(--n200);
  --color-border-strong: var(--n200);
  --color-link: var(--green-text);
  --scrim: color-mix(in srgb, var(--ink) 35%, transparent);

  /* neutrals */
  --color-neutral-50: var(--n50);
  --color-neutral-100: var(--n50);
  --color-neutral-200: var(--n50);
  --color-neutral-300: var(--n200);
  --color-neutral-400: color-mix(in srgb, var(--n200) 60%, var(--n600));
  --color-neutral-500: var(--n600);
  --color-neutral-700: var(--n600);
  --color-neutral-800: var(--ink);

  /* the one accent: Gecko Green. A fill with ink text on top, or a mark (selected edge); never text on white */
  --color-accent: var(--green);
  --color-accent-hover: color-mix(in srgb, var(--green) 88%, var(--ink));
  --color-on-accent: var(--ink);
  --color-accent-50: var(--n50);
  --color-accent-100: var(--n50);
  --color-accent-200: var(--n200);
  --color-accent-300: var(--n200);
  --color-accent-500: var(--ink);       /* focus ring */
  --color-accent-700: var(--green-text);

  /* status: no amber. Meaning is carried by a dot and the words, on a grey badge */
  --good: var(--green-text);  --good-bg: var(--n50);  --good-border: var(--n200);
  --warn: var(--ink);         --warn-bg: var(--n50);  --warn-border: var(--n200);
  --bad:  var(--alert);       --bad-bg:  var(--n50);  --bad-border:  var(--n200);
  --off:  var(--n600);        --off-bg:  var(--n50);  --off-border:  var(--n200);

  /* type scale: titles 20, sections 15, body 14, tables 13, labels 12 */
  --fs-title: 20px; --fs-section: 15px; --fs-body: 14px; --fs-table: 13px; --fs-label: 12px;

  /* 8px grid */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;

  --radius-md: 8px;      /* buttons, inputs, menu items */
  --radius-lg: 12px;     /* cards, tables, filter panel, dialogs */
  --radius-xl: 16px;     /* the white sheet */
  --radius-full: 999px;  /* badges, chips, dots */
  --radius-card: var(--radius-lg);
  --radius-ctl: var(--radius-md);
  --radius-pill: var(--radius-full);

  /* the one shadow: dropdowns, side panels, dialogs. Nothing else casts one. */
  --shadow: 0 8px 24px color-mix(in srgb, var(--ink) 12%, transparent);

  --row-h: 44px;
  --sidebar-w: 232px;
  --sidebar-w-collapsed: 56px;
  --topbar-h: 56px;
}