:root {
  /* Foundations: edit these shared tokens to update both the system page and portfolio. */
  --portfolio-font-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif;

  --portfolio-color-bg: #fafafa;
  --portfolio-color-surface: #ffffff;
  --portfolio-color-text-strong: #1a1a1a;
  --portfolio-color-text: rgb(26 26 26 / 0.70);
  --portfolio-color-text-subtle: rgb(26 26 26 / 0.48);
  --portfolio-color-line-subtle: #f2f2f2;
  --portfolio-color-line: #e6e6e6;
  --portfolio-color-line-strong: #cccccc;
  --portfolio-color-accent: #1559ea;
  --portfolio-color-accent-soft: #f2f7ff;

  --portfolio-space-01: 4px;
  --portfolio-space-02: 8px;
  --portfolio-space-03: 12px;
  --portfolio-space-04: 16px;
  --portfolio-space-05: 24px;
  --portfolio-space-06: 32px;
  --portfolio-space-07: 40px;
  --portfolio-space-08: 48px;
  --portfolio-space-09: 64px;
  --portfolio-space-10: 80px;

  --portfolio-type-brand-size: 36px;
  --portfolio-type-brand-line: 36px;
  --portfolio-type-brand-weight: 700;
  --portfolio-type-page-title-size: 38px;
  --portfolio-type-page-title-line: 42px;
  --portfolio-type-page-title-weight: 600;
  --portfolio-type-page-title-mobile-size: 30px;
  --portfolio-type-page-title-mobile-line: 36px;
  --portfolio-type-heading-01-size: 42px;
  --portfolio-type-heading-01-line: 48px;
  --portfolio-type-heading-01-weight: 600;
  --portfolio-type-heading-02-size: 30px;
  --portfolio-type-heading-02-line: 36px;
  --portfolio-type-heading-02-weight: 600;
  --portfolio-type-heading-03-size: 24px;
  --portfolio-type-heading-03-line: 29px;
  --portfolio-type-heading-03-weight: 600;
  --portfolio-type-heading-04-size: 22px;
  --portfolio-type-heading-04-line: 26px;
  --portfolio-type-heading-04-weight: 600;
  --portfolio-type-subheading-size: 17px;
  --portfolio-type-subheading-line: 22px;
  --portfolio-type-subheading-weight: 600;
  --portfolio-type-lead-size: 15px;
  --portfolio-type-lead-line: 23px;
  --portfolio-type-lead-weight: 400;
  --portfolio-type-long-copy-size: 15px;
  --portfolio-type-long-copy-line: 26px;
  --portfolio-type-long-copy-weight: 400;
  --portfolio-type-body-size: 14px;
  --portfolio-type-body-line: 20px;
  --portfolio-type-body-weight: 400;
  --portfolio-type-body-medium-weight: 500;
  --portfolio-type-caption-size: 12px;
  --portfolio-type-caption-line: 18px;
  --portfolio-type-caption-weight: 600;
  --portfolio-type-micro-size: 10px;
  --portfolio-type-micro-line: 14px;
  --portfolio-type-micro-weight: 400;

  --portfolio-divider-width: 1px;
  --portfolio-topbar-height: 68px;
  --portfolio-topbar-mobile-height: 60px;
  --portfolio-topbar-padding-inline: var(--portfolio-space-05);
  --portfolio-topbar-mobile-padding-inline: var(--portfolio-space-03);
  --portfolio-topbar-backdrop-blur: 16px;
  --portfolio-topbar-brand-mark-size: 36px;
  --portfolio-topbar-brand-gap: var(--portfolio-space-03);
  --portfolio-topbar-brand-size: 14px;
  --portfolio-topbar-brand-line: 20px;
  --portfolio-topbar-brand-weight: 600;
  --portfolio-layout-max: 1600px;
  --portfolio-sidebar-width: 228px;
  --portfolio-flow-max: 1120px;
  --portfolio-flow-padding-inline: clamp(var(--portfolio-space-06), 5vw, var(--portfolio-space-10));
  --portfolio-project-toc-width: var(--portfolio-sidebar-width);
  --portfolio-project-toc-gap: 36px;
  --portfolio-project-toc-top-gap: 32px;
  --portfolio-project-toc-padding-inline: 24px;
  --portfolio-nav-item-gap: 4px;
  --portfolio-nav-item-min-height: 36px;
  --portfolio-nav-item-padding-block: 8px;
  --portfolio-nav-item-padding-inline: 10px;
  --portfolio-nav-item-radius: var(--portfolio-radius-sm);
  --portfolio-nav-item-size: 13px;
  --portfolio-nav-item-line: 20px;
  --portfolio-nav-item-weight: 400;
  --portfolio-content-max: 1280px;
  --portfolio-radius-sm: 4px;
  --portfolio-radius-md: 6px;
  --portfolio-radius-lg: 16px;

  /* Motion and media loading: shared by image evidence and content entry. */
  --portfolio-motion-duration-md: 260ms;
  --portfolio-motion-duration-lg: 420ms;
  --portfolio-motion-duration-entry: 560ms;
  --portfolio-motion-ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --portfolio-motion-distance-entry: 12px;
  --portfolio-image-placeholder-shimmer-duration: 1400ms;

  /* Semantic rhythm used by project pages. */
  --portfolio-gap-copy: var(--portfolio-space-02);
  --portfolio-gap-module: var(--portfolio-space-05);
  --portfolio-gap-columns: var(--portfolio-space-06);
  --portfolio-gap-component: var(--portfolio-space-08);
  --portfolio-gap-group: var(--portfolio-space-09);
  --portfolio-gap-section: var(--portfolio-space-10);
}