/*
 * Pipe Down OS design tokens (spec §7).
 *
 * Every colour, font, size and spacing value the app uses lives here.
 * Change the look by editing this file only. app.css must not contain any
 * raw colour values: a test enforces this.
 */
:root {
  color-scheme: dark;

  /* Brand */
  --brand-black: #080c0f;
  --brand-cyan: #2fe6ee;
  --brand-teal: #00b2b8;
  --brand-silver: #c4cdd2;

  /* Surfaces and text */
  --color-bg: var(--brand-black);
  --color-surface: #11181d;
  --color-surface-raised: #13242a;
  --color-border: #25323a;
  --color-text: #eef6f8;
  --color-text-muted: #8fa3ab;
  --color-text-on-accent: #04181b;

  /* Accents */
  --color-accent: var(--brand-cyan);
  --color-accent-strong: var(--brand-teal);
  --color-focus: var(--brand-cyan);

  /* Status */
  --color-ok: #3ddc97;
  --color-warn: #f2b04a;
  --color-bad: #ff6b6b;

  /* QR codes need a plain light background to scan reliably */
  --color-qr-bg: #ffffff;

  /* Environment banners */
  --color-env-staging: #f2b04a;
  --color-env-development: #8fa3ab;

  /* Type */
  --font-body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 26px;
  --line-height: 1.5;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 32px;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --border-accent: 3px;

  /* Layout */
  --page-max-width: 1080px;
  --logo-height: 52px;
  --logo-height-mobile: 36px;
  --tile-min-width: 220px;
  --form-max-width: 420px;
}