:root {
  /* Canonical source: design/brand-tokens.css */
  --brand-canvas: #0f1620;
  --brand-surface: #141b26;
  --brand-surface-raised: #1b2635;
  --brand-white: #f5f5f5;
  --brand-light-blue: #8eadcf;
  --brand-muted: #b0b0b0;
  --brand-hairline: rgba(142, 173, 207, 0.28);
  --brand-hairline-strong: rgba(142, 173, 207, 0.52);
  --brand-shadow: 0 20px 60px rgba(0, 0, 0, 0.42);
  --brand-shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.28);
  --brand-font: "Open Sans", sans-serif;
  --brand-weight-light: 300;
  --brand-weight-regular: 400;
  --brand-leading-tight: 1.08;
  --brand-leading-copy: 1.55;
  --brand-radius-small: 12px;
  --brand-radius-medium: 20px;
  --brand-radius-large: 28px;
  --brand-content-width: 1280px;
  --brand-space-1: 0.5rem;
  --brand-space-2: 0.75rem;
  --brand-space-3: 1rem;
  --brand-space-4: 1.5rem;
  --brand-space-5: 2rem;
  --brand-space-6: 3rem;
  --brand-space-7: 4.5rem;
  --brand-space-8: 7rem;
  --brand-motion-fast: 160ms;
  --brand-motion-standard: 240ms;
  --brand-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Compatibility aliases used by existing non-homepage views. */
  --dark-bg: var(--brand-canvas);
  --dark-bg-secondary: var(--brand-surface);
  --dark-bg-tertiary: var(--brand-surface-raised);
  --accent: var(--brand-light-blue);
  --accent-hover: #aac4df;
  --text: var(--brand-white);
  --text-primary: var(--brand-white);
  --text-secondary: var(--brand-muted);
  --card-bg: var(--brand-surface);
  --border-light: var(--brand-hairline);
  --border-accent: var(--brand-hairline-strong);
  --shadow-sm: 0 5px 15px rgba(0, 0, 0, 0.2);
  --shadow-md: var(--brand-shadow-soft);
  --shadow-lg: var(--brand-shadow);
  --transition: all var(--brand-motion-standard) var(--brand-ease);
  --font-family: var(--brand-font);
  --letter-spacing: 0;
  --font-size-base: 1.0625rem;
  --font-size-small: 0.875rem;
  --line-height-base: var(--brand-leading-copy);
  --line-height-heading: var(--brand-leading-tight);
  --line-height-small: 1.45;
  --font-size-h1: clamp(2.75rem, 6vw, 6rem);
  --font-size-h2: clamp(2rem, 4vw, 4rem);
  --font-size-h3: clamp(1.25rem, 1.8vw, 1.75rem);
  --font-size-h4: 1.35rem;
  --font-size-h5: 1.125rem;
  --font-size-h6: 1rem;
  --font-size-base-tablet: 1.0625rem;
  --font-size-small-tablet: 0.875rem;
  --font-size-h1-tablet: 4rem;
  --font-size-h2-tablet: 3rem;
  --font-size-h3-tablet: 1.5rem;
  --font-size-h4-tablet: 1.25rem;
  --font-size-h5-tablet: 1.125rem;
  --font-size-h6-tablet: 1rem;
  --font-size-base-mobile: 1rem;
  --font-size-small-mobile: 0.875rem;
  --font-size-h1-mobile: 2.75rem;
  --font-size-h2-mobile: 2.25rem;
  --font-size-h3-mobile: 1.35rem;
  --font-size-h4-mobile: 1.2rem;
  --font-size-h5-mobile: 1.0625rem;
  --font-size-h6-mobile: 1rem;
  --space-sm: var(--brand-space-3);
  --breakpoint-xl: 1200px;
}