:root {
  color-scheme: dark;

  /* Color: approved Waterside palette */
  --color-text-primary: #ffffff;
  --color-text-secondary: #bec0c2;
  --color-text-on-light: #111111;
  --color-text-on-light-secondary: #4b4b49;
  --color-bg-primary: #171f26;
  --color-bg-secondary: #f3f3f1;
  --color-bg-tertiary: #e8e8e5;
  --color-border: #d8d8d4;
  --color-border-on-dark: #3a4248;
  --color-hover: #e8e8e5;
  --color-accent: #74878d;
  --color-accent-hover: #87989d;
  --color-focus: #9babb0;

  /* Typography */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-size-h1: 4rem;
  --font-size-h2: 2.25rem;
  --font-size-body: 1.0625rem;
  --font-size-body-small: 0.9375rem;
  --font-size-caption: 0.75rem;
  --font-size-brand: 1.75rem;
  --font-size-section-title: 0.9375rem;
  --font-weight-regular: 400;
  --font-weight-medium: 550;
  --font-weight-semibold: 600;
  --font-weight-brand: 650;
  --line-height-heading: 1.1;
  --line-height-body: 1.65;
  --line-height-compact: 1.2;
  --line-height-caption: 1.5;
  --letter-spacing-h1: -0.035em;
  --letter-spacing-h2: -0.02em;
  --letter-spacing-body: 0;
  --letter-spacing-caption: 0.02em;
  --letter-spacing-brand: 0.04em;
  --letter-spacing-label: 0.1em;

  /* Spacing: 4px base scale */
  --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;
  --space-32: 8rem;

  /* Layout */
  --layout-max-width: 104.5rem;
  --layout-reading-width: 45rem;
  --layout-reference-width: 72rem;
  --layout-mobile-preview-width: 24.375rem;
  --layout-page-gutter: clamp(1.25rem, 2.25vw, 2rem);
  --layout-section-gap: var(--space-32);
  --layout-grid-gap: var(--space-6);
  --layout-grid-columns: 12;
  --breakpoint-mobile: 47.9375rem;
  --breakpoint-wide: 80rem;

  /* Controls and component geometry */
  --size-header-min: clamp(4.75rem, 10svh, 6rem);
  --size-touch-target: 3rem;
  --size-touch-target-mobile: 2.5rem;
  --size-menu-line: 1.75rem;
  --size-menu-line-mobile: 1.5rem;
  --size-menu-stroke: 0.1875rem;
  --size-menu-stroke-mobile: 0.125rem;
  --size-dropdown-min: 7.5rem;
  --size-filing-icon-width: 1.125rem;
  --size-filing-icon-height: 1.25rem;
  --size-swatch-height: 5rem;
  --size-viewport-min: 20rem;
  --radius-control: 0.125rem;
  --radius-image: 0;
  --radius-pill: 999px;
  --border-width: 0.0625rem;
  --focus-width: 0.1875rem;
  --focus-offset: 0.3125rem;
  --shadow-dropdown: none;
  --z-dropdown: 10;

  /* Motion */
  --motion-duration-fast: 160ms;
  --motion-duration-reveal: 480ms;
  --motion-distance-small: 0.375rem;
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* CSS custom properties cannot be used in media-query conditions.
   Keep this literal synchronized with --breakpoint-mobile. */
@media (max-width: 47.9375rem) {
  :root {
    --font-size-h1: 2.5rem;
    --font-size-h2: 1.75rem;
    --font-size-body: 1rem;
    --font-size-body-small: 0.8125rem;
    --font-size-brand: 1.125rem;
    --font-size-section-title: 0.8125rem;
    --layout-section-gap: var(--space-20);
    --layout-grid-gap: var(--space-4);
    --layout-grid-columns: 4;
  }
}