/* Design tokens for Q Systems (ADR-016). Custom properties only, no
   framework and no CDN font or icon imports, so the vanilla JS front end
   never fetches styling from outside our own origin. */

:root {
  /* Colour */
  --colour-background: #ffffff;
  --colour-surface: #f4f5f7;
  --colour-border: #d5d9e0;
  --colour-text: #1b1f27;
  --colour-text-muted: #5b6270;
  --colour-primary: #1d4ed8;
  --colour-primary-text: #ffffff;
  --colour-danger: #b91c1c;
  --colour-success: #15803d;

  /* Type */
  --font-family-base:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-small: 0.875rem;
  --font-size-base: 1rem;
  --font-size-large: 1.25rem;
  --font-size-heading: 1.75rem;
  --line-height-base: 1.5;

  /* Space */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;

  /* Shape */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --border-width: 1px;

  /* Focus (visible focus is a guardrail, ADR-016) */
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--colour-background);
  color: var(--colour-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

:focus-visible {
  outline: var(--focus-outline-width) solid var(--colour-primary);
  outline-offset: var(--focus-outline-offset);
}