:root {
  /*
   * SF Client UI — shared public-facing design tokens.
   * Tokens name reusable decisions only; component selectors belong in components/.
   */
  --sf-font-body: "DM Sans", sans-serif;
  --sf-font-ui: "Poppins", sans-serif;

  --sf-color-surface: #ffffff;
  --sf-color-surface-subtle: #f0eff5;
  --sf-color-surface-hover: #e9e7f1;
  --sf-color-action-secondary: #dbd8ed;
  --sf-color-action-primary: #3f3c5a;
  --sf-color-on-action-primary: #ffffff;
  --sf-color-text: #25242e;
  --sf-color-text-secondary: #6f6d7d;
  --sf-color-icon: #3f3c5a;
  --sf-color-icon-muted: #c4c7e1;
  --sf-color-border: #e3e1ea;
  --sf-color-accent: #ffad69;
  --sf-color-danger: #b42318;
  --sf-color-success: #18794e;
  --sf-color-overlay-panel: rgb(0 0 0 / 46%);
  --sf-color-overlay-card: rgb(255 255 255 / 20%);
  --sf-color-overlay-border: rgb(255 255 255 / 32%);
  --sf-color-on-overlay: #ffffff;

  --sf-space-1: 4px;
  --sf-space-2: 8px;
  --sf-space-3: 12px;
  --sf-space-4: 16px;
  --sf-space-5: 20px;
  --sf-space-6: 24px;

  --sf-radius-sm: 8px;
  --sf-radius-md: 12px;
  --sf-radius-lg: 16px;
  --sf-radius-round: 999px;

  --sf-control-size: 44px;
  --sf-context-appbar-height: 68px;
  --sf-context-media-control-size: 38px;
  --sf-context-media-backdrop-blur: 30px;
  --sf-context-media-surface: #25242e;
  --sf-context-media-radius: 16px;
  --sf-focus-ring: 0 0 0 3px rgb(255 173 105 / 38%);
  --sf-shadow-sticky-toolbar: 0 6px 12px -6px rgb(37 36 46 / 24%);

  --sf-filter-control-surface: #e8e8f1;
  --sf-filter-control-active-surface: #ffdfbd;
  --sf-filter-control-active-text: #eb8324;
  --sf-filter-panel-surface: rgb(37 36 46 / 59%);
  --sf-filter-panel-control: rgb(255 255 255 / 20%);
  --sf-filter-panel-control-active: rgb(255 255 255 / 32%);
  --sf-filter-panel-blur: 15px;
}

.sf-main-content-page {
  container-type: inline-size;
  container-name: main;
}