/*
 * Design tokens.
 *
 * Every colour, size and duration in the app resolves to something here, so the
 * visual language can be retuned from one file. The accent in particular is a
 * single value by design: the brief calls for one accent colour, and keeping it
 * to one token is what enforces that as the app grows.
 */

:root {
  /* --- Surfaces. Deep charcoal, deliberately not pure black. --- */
  --bg: #17191c;
  --surface: #1e2125;
  --surface-raised: #262a2f;
  --surface-sunken: #131518;

  /* --- Lines --- */
  --border: #32373d;
  --border-strong: #434a52;

  /* --- Text --- */
  --text: #e4e7ea;
  --text-dim: #98a1a9;
  --text-faint: #6b747c;

  /* --- Accent. Muted teal. Swap these three to retheme the whole app. --- */
  --accent: #4db6a4;
  --accent-dim: #3d9385;
  --accent-fade: rgba(77, 182, 164, 0.12);

  /* --- Status --- */
  --warn: #d9a85c;
  --warn-fade: rgba(217, 168, 92, 0.12);
  --danger: #d9736a;
  --danger-fade: rgba(217, 115, 106, 0.12);

  /* --- Type. Mono-forward, per the brief. --- */
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;

  --leading-tight: 1.3;
  --leading: 1.6;

  /* --- Space. 4px base. --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* --- Shape --- */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;

  /* --- Minimum interactive size. Large tap targets, per the brief. --- */
  --tap: 44px;

  /* --- Motion --- */
  --transition: 120ms ease;

  /* --- Layout --- */
  --header-height: 56px;
  --panel-width: 320px;
}