:root {
  /* ---------- Brand and surface colours ---------- */
  --color-primary: #2a3647;
  --color-primary-hover: #177da8;
  --color-primary-active: #091931;
  --color-accent: #29abe2;
  --color-surface: #ffffff;
  --color-background: #f6f7f8;
  --color-background-inverse: #2a3647;

  /* ---------- Text colours ---------- */
  --color-text: #000000;
  --color-text-strong: #2a3647;
  --color-text-muted: #42526e;
  --color-text-subtle: #686868;
  --color-text-on-dark: #ffffff;

  /* ---------- Status colours ---------- */
  --color-urgent: #ff3d00;
  --color-medium: #ffa800;
  --color-low: #7ae229;
  --color-limit-desktop: #ff3d00;
  --color-limit-mobile: #de3500;
  --color-alert-surface: rgba(255, 210, 210, 0.52);

  /* ---------- Issue Collector specifics ---------- */
  --color-creator-member: #92ffbc;
  --color-creator-extern: #ebfc88;
  --color-creator-text: #0b3681;
  --color-ai-gradient-from: #9327ff;
  --color-ai-gradient-to: #2ea1dc;
  --gradient-ai: linear-gradient(90deg, var(--color-ai-gradient-from), var(--color-ai-gradient-to));
  --color-label-user-story: #7b3acf;
  --color-label-technical: #12ad9a;

  /* ---------- Borders ---------- */
  --color-border-field: #d1d1d1;
  --color-border-field-hover: #686868;
  --color-border-field-focus: #177da8;
  --color-link-email: #007cee;
  --color-divider: #e7e7e7;

  /* ---------- Overlay and interaction tints ---------- */
  --color-scrim: rgba(0, 0, 0, 0.35);
  --color-primary-hover-tint: rgba(23, 125, 168, 0.12);
  --color-hover-on-dark: rgba(255, 255, 255, 0.1);
  --color-active-on-dark: rgba(255, 255, 255, 0.14);

  /* ---------- Type families ---------- */
  --font-ui: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-prose: 'Open Sans', 'Segoe UI', system-ui, sans-serif;

  /* ---------- Type scale ---------- */
  --font-size-t1: 61px;
  --font-size-t2: 47px;
  --font-size-t4: 28px;
  --font-size-t5: 27px;
  --font-size-t6: 20px;
  --font-size-body: 16px;

  --font-size-display-desktop: 64px;
  --font-size-display-mobile: 40px;
  --font-size-card-title: 32px;
  --font-size-lead-desktop: 28px;
  --font-size-lead-mobile: 22px;
  --font-size-23: 23px;
  --font-size-19: 19px;
  --font-size-18: 18px;

  --line-height-ratio: 1.2;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---------- Radii ---------- */
  --radius-checkbox: 3px;
  --radius-badge: 4px;
  --radius-button: 8px;
  --radius-image: 8px;
  --radius-field: 10px;
  --radius-panel: 16px;
  --radius-card: 24px;
  --radius-dialog: 30px;
  --radius-round: 50%;

  /* ---------- Shadows ---------- */
  --shadow-card: 0 0 4px 0 rgba(0, 0, 0, 0.1);
  --shadow-panel: 0 0 10px 3px rgba(0, 0, 0, 0.08);
  --shadow-button: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  --shadow-header: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
  --shadow-dropdown: 0 12px 28px rgba(0, 0, 0, 0.18);
  --shadow-overlay: 0 24px 80px rgba(0, 0, 0, 0.16);

  /* ---------- Spacing ---------- */
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-70: 70px;

  /* ---------- Layout ---------- */
  --layout-sidebar-width: 232px;
  --layout-header-height: 96px;
  --layout-desktop-content: 1121px;
  --layout-desktop-gutter: 160px;
  --layout-mobile-content: 390px;
  --layout-card-max: 789px;

  /* ---------- Focus ---------- */
  --focus-ring: 0 0 0 3px rgba(23, 125, 168, 0.55);
}