/* Transcribed verbatim from docs/05_styling_theming_colour_palette.md §5 */
:root {
  /* Brand */
  --color-body: #eff3ff;
  --color-body-secondary: #bdd7e7;
  --color-accent: #6baed6;
  --color-accent-strong: #2171b5;
  --color-text: #222526;

  /* Surfaces */
  --color-surface: #f7f9ff;
  --color-surface-strong: #ffffff;
  --color-border: #d7e2f0;
  --color-border-strong: #a9c8de;

  /* Text */
  --color-text-muted: #536273;
  --color-text-subtle: #718096;
  --color-text-inverse: #ffffff;

  /* Feedback */
  --color-success: #2f9e72;
  --color-success-soft: #e3f5ed;
  --color-warning: #c58a21;
  --color-warning-soft: #fff3d6;
  --color-error: #c94d55;
  --color-error-soft: #fce8ea;
  --color-info: #2171b5;
  --color-info-soft: #e4f0fa;

  /* Shadows (values matched to docs/mockup_html/styles.css) */
  --shadow-light: rgba(255, 255, 255, 0.95);
  --shadow-dark: rgba(83, 111, 139, 0.18);
  --shadow-dark-soft: rgba(83, 111, 139, 0.12);
  --shadow-accent: rgba(33, 113, 181, 0.2);

  /* Radii */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Typography */
  --font-sans: Inter, Manrope, 'Segoe UI', system-ui, sans-serif;

  /* Layout */
  --content-max-width: 1380px;
  --content-readable-width: 760px;
  --header-height: 72px;

  /* Animation */
  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --duration-slow: 260ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}