/* Shared by server-rendered pages and React. Roles, not page-specific sizes.
   Colours stay in the existing theme: never invert logos or media surfaces. */
:root {
  --ui-page-title: clamp(36px, 4.5vw, 64px);
  --ui-section-size: clamp(24px, 2.2vw, 32px);
  --ui-subsection-size: clamp(20px, 1.65vw, 24px);
  --ui-panel-size: 22px;
  --ui-card-size: 16px;
  --ui-body-size: 16px;
  --ui-meta-size: 13px;
  --ui-label-size: 12px;
  --ui-heading-tracking: -.035em;
  --ui-font-section: 750 var(--ui-section-size)/1.2 var(--display);
  --ui-font-subsection: 700 var(--ui-subsection-size)/1.3 var(--display);
  --ui-font-panel: 700 var(--ui-panel-size)/1.25 var(--display);
  --ui-font-card: 650 var(--ui-card-size)/1.4 var(--grotesk);
  --ui-font-body: 400 var(--ui-body-size)/1.65 var(--grotesk);
  --ui-font-meta: 400 var(--ui-meta-size)/1.5 var(--grotesk);
  --ui-font-label: 500 var(--ui-label-size)/1.4 var(--grotesk);
  --ui-font-action: 600 14px/1.4 var(--grotesk);
  --ui-space-section: clamp(32px, 3.5vw, 56px);
  --ui-space-heading: 24px;
  --ui-space-grid: 20px;
  --ui-radius-control: 12px;
  --ui-radius-image: 12px;
  --ui-radius-card: 16px;
  --ui-radius-panel: 24px;
  --ui-radius-pill: 999px;
  --ui-action-height: 48px;
}
@media (max-width: 1023px) {
  :root {
    --ui-section-size: clamp(22px, 5.5vw, 26px);
    --ui-subsection-size: 20px;
    --ui-panel-size: 20px;
    --ui-space-section: 32px;
    --ui-space-heading: 18px;
    --ui-space-grid: 14px;
    --ui-font-action: 600 15px/1.4 var(--grotesk);
  }
}