:root {
  color-scheme: dark;

  /* Color roles */
  --ff-color-canvas: #101316;
  --ff-color-surface: #191d21;
  --ff-color-surface-high: #23292e;
  --ff-color-text: #f2f5f6;
  --ff-color-muted: #b7c0c5;
  --ff-color-brand: #6b8dff;
  --ff-color-brand-hover: #7ea0ff;
  --ff-color-action: #4d68d9;
  --ff-color-action-hover: #405ac2;
  --ff-color-on-action: #fff;
  --ff-color-line: #343b40;
  --ff-color-success: #3fd69f;
  --ff-color-error: #ff777d;
  --ff-color-warning: #ffc56e;
  --ff-color-scrim: rgb(8 10 12 / 78%);
  --ff-color-header: rgb(16 19 22 / 94%);
  --ff-color-placeholder: #c4ccd0;

  /* Typography */
  --ff-font-display: "Literata", "Iowan Old Style", Georgia, serif;
  --ff-font-body: "Onest", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ff-type-display-1: clamp(3.5rem, 5.7vw, 5.5rem);
  --ff-type-display-2: clamp(2.75rem, 4.2vw, 4rem);
  --ff-type-display-3: clamp(2rem, 2.8vw, 3rem);
  --ff-type-heading-3: clamp(1.5rem, 2vw, 2rem);
  --ff-type-body-large: 1.1875rem;
  --ff-type-body: 1.0625rem;
  --ff-type-ui: 1rem;
  --ff-type-caption: 0.875rem;

  /* Layout */
  --ff-container-max: 93.75rem;
  --ff-container-reading: 47.5rem;
  --ff-container-form: 72.5rem;
  --ff-page-gutter: clamp(1.25rem, 4vw, 4.5rem);
  --ff-grid-gap: clamp(1rem, 2vw, 2rem);

  /* Spacing */
  --ff-space-1: 0.25rem;
  --ff-space-2: 0.5rem;
  --ff-space-3: 0.75rem;
  --ff-space-4: 1rem;
  --ff-space-5: 1.25rem;
  --ff-space-6: 1.5rem;
  --ff-space-8: 2rem;
  --ff-space-10: 2.5rem;
  --ff-space-12: 3rem;
  --ff-space-16: 4rem;
  --ff-space-20: 5rem;
  --ff-space-24: 6rem;
  --ff-space-30: 7.5rem;
  --ff-space-36: 9rem;
  --ff-space-40: 10rem;

  /* Geometry */
  --ff-radius-media: 0;
  --ff-radius-control: 0.5rem;
  --ff-radius-field: 0.625rem;
  --ff-radius-panel: 0.75rem;
  --ff-border-default: 1px solid var(--ff-color-line);
  --ff-shadow-menu: 0 0.5rem 1.5rem rgb(3 6 8 / 24%);

  /* Motion */
  --ff-duration-release: 100ms;
  --ff-duration-press: 120ms;
  --ff-duration-switch: 140ms;
  --ff-duration-exit: 160ms;
  --ff-duration-state: 180ms;
  --ff-duration-surface: 240ms;
  --ff-duration-reduced: 80ms;
  --ff-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ff-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ff-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Layers */
  --ff-z-base: 0;
  --ff-z-sticky: 20;
  --ff-z-menu: 40;
  --ff-z-backdrop: 60;
  --ff-z-dialog: 70;
  --ff-z-toast: 80;
  --ff-z-tooltip: 90;

  /* Compatibility aliases removed with the legacy component rules. */
  --ff-base: var(--ff-color-canvas);
  --ff-surface: var(--ff-color-surface);
  --ff-surface-2: var(--ff-color-surface-high);
  --ff-text: var(--ff-color-text);
  --ff-muted: var(--ff-color-muted);
  --ff-primary: var(--ff-color-brand);
  --ff-primary-hover: var(--ff-color-brand-hover);
  --ff-bright: var(--ff-color-brand);
  --ff-cyan: var(--ff-color-brand-hover);
  --ff-mint: var(--ff-color-success);
  --ff-mint-dark: var(--ff-color-success);
  --ff-ink: var(--ff-color-canvas);
  --ff-border: var(--ff-color-line);
  --ff-warning: var(--ff-color-warning);
  --ff-error: var(--ff-color-error);
  --ff-radius: var(--ff-radius-panel);
  --ff-radius-lg: var(--ff-radius-panel);
  --ff-shadow: none;
  --ff-container: var(--ff-container-max);
}

@media (max-width: 47.999rem) {
  :root {
    --ff-type-display-1: clamp(2.75rem, 12vw, 3.25rem);
    --ff-type-display-2: clamp(2.25rem, 9vw, 2.75rem);
    --ff-type-display-3: clamp(1.75rem, 7vw, 2.25rem);
    --ff-type-heading-3: 1.5rem;
    --ff-type-body-large: 1.0625rem;
    --ff-type-body: 1rem;
    --ff-grid-gap: 1rem;
  }
}