:root {
  color-scheme: light;

  /* Accura palette */
  --color-ink: #111315;
  --color-charcoal: #24282b;
  --color-graphite: #454a4e;
  --color-slate: #697077;
  --color-gray: #d9dcdd;
  --color-soft-gray: #eceded;
  --color-background: #f5f5f4;
  --color-white: #ffffff;

  /* Type */
  --font-heading: "Manrope", "Avenir Next", sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", sans-serif;
  --font-size-xs: 0.8125rem;
  --font-size-sm: 0.9375rem;
  --font-size-md: 1rem;
  --font-size-lg: clamp(1.125rem, 1.5vw, 1.375rem);
  --font-size-xl: clamp(1.5rem, 2.5vw, 2rem);
  --font-size-2xl: clamp(2rem, 5vw, 3.5rem);
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.12;
  --line-height-body: 1.6;

  /* Layout */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --container-reading: 42rem;
  --container-content: 76rem;
  --container-wide: 90rem;
  --page-gutter: clamp(1rem, 4vw, 2.5rem);
  --header-min-height: 4.5rem;
  --color-focus-on-dark: var(--color-white);

  /* Responsive breakpoints for reference: 375px, 768px, 1024px, 1440px */
  --breakpoint-tablet: 48rem;
  --breakpoint-desktop: 64rem;
  --breakpoint-wide: 90rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --border-color: var(--color-gray);
  --border-width: 1px;
  --shadow-none: none;
  --motion-fast: 160ms;
  --motion-standard: 240ms;
  --motion-slow: 420ms;
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}