/* Design tokens (F07-S01, F33-S01): every colour, font, size and spacing the UI uses lives here, and no
   other file names a colour (tests/e2e/shell/tokens.spec.ts checks it). The four prototype colours are
   --brand-navy (sidebar, primary buttons), --brand-sand (accents, the active menu item), --color-canvas (pages)
   and --color-surface (cards); everything that shows them refers to these variables.
   The default is the Sirocco 2026 brand, taken from the UI prototype. Another customer swaps
   this file; no other file needs to change and there is no theming engine.
   Text colours are chosen to pass WCAG 2.1 AA contrast (4.5:1) on the surface and canvas colours. */
:root {
  /* Brand */
  --brand-navy: #282b33;
  --brand-navy-light: #363941;
  --brand-sand: #c9c0a4;
  --brand-sand-soft: #f0ede3;
  --brand-logo-light: #cfc3a8;
  --brand-logo-dark: #b2a792;
  --brand-logo-wordmark: #ffffff; /* white on the navy sidebar */

  /* Surfaces and text */
  --color-canvas: #f3f3ef;
  --color-surface: #fdfdfb;
  --color-ink: #282a31;
  --color-muted: #63645e; /* the prototype's #777871 is 4.4:1 on white, just under AA */
  --color-line: #dfdfd8;
  --color-line-soft: #e8e8e2;

  /* Sidebar */
  --sidebar-bg: var(--brand-navy);
  --sidebar-text: #d0cec7;
  --sidebar-label: #a3a39c;
  --sidebar-hover: rgba(255, 255, 255, 0.06);
  --sidebar-hover-text: #ffffff;
  --sidebar-divider: rgba(255, 255, 255, 0.1);
  --sidebar-close-border: rgba(255, 255, 255, 0.15);
  --sidebar-active-bg: var(--brand-sand);
  --sidebar-active-text: #292c34;

  /* Status */
  --color-green: #4f6a5c;
  --color-green-soft: #e7eee9;
  --color-amber: #7d6434;
  --color-amber-soft: #f2ecdf;
  --color-red: #a8424a;
  --color-red-soft: #fdebed;

  /* Actions and focus */
  --color-primary: var(--brand-navy);
  --color-primary-hover: var(--brand-navy-light);
  --color-on-primary: #ffffff;
  --color-focus: #8a6d1f;
  --focus-ring: 0 0 0 3px rgba(201, 192, 164, 0.9);

  /* Top bar, avatar, dialogs */
  --topbar-bg: rgba(253, 253, 251, 0.96); /* the surface colour, slightly see-through */
  --avatar-text: #353632;
  --color-input: #ffffff;
  --backdrop: rgba(15, 25, 40, 0.38);

  /* Type */
  --font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 25px;
  --font-weight-normal: 450;
  --font-weight-strong: 650;
  --font-weight-heading: 680;
  --line-height: 1.45;

  /* Spacing (4 px steps) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Shape and depth */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 11px;
  --shadow-panel: 0 10px 30px rgba(40, 43, 51, 0.055);
  --shadow-menu: 0 12px 32px rgba(40, 43, 51, 0.16);
  --shadow-button: 0 5px 12px rgba(40, 43, 51, 0.14);

  /* Layout */
  --sidebar-width: 244px;
  --topbar-height: 88px;
  --content-max-width: 1500px;
}