/* Generated from tokens.json — @form-from/ui 0.1.0. */

/* Apply .ff-theme or data-ff-theme to a root/container. No global reset. */

.ff-theme, [data-ff-theme] {
  color-scheme: light;
  --ff-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ff-font-serif: Georgia, "Times New Roman", serif;
  --ff-brand-paper: #f1f0e9;
  --ff-brand-forest: #17382e;
  --ff-brand-graphite: #101b17;
  --ff-brand-sage: #b9caaf;
  --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-radius-control: 0;
  --ff-border-width: 1px;
  --ff-focus-width: 2px;
  --ff-focus-offset: 3px;
  --ff-duration-fast: 120ms;
  --ff-duration-normal: 180ms;
  --ff-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ff-type-nav: 0.875rem;
  --ff-type-input: 1rem;
  --ff-type-heading: 1.75rem;
  --ff-line-body: 1.5;
  --ff-line-control: 1.4;
  --ff-control-height-touch: 2.75rem;
  --ff-type-title: 2rem;
  --ff-icon-size: 1.125rem;
  --ff-line-heading: 1.15;
  --ff-control-gap: 0.5rem;
  --ff-type-body: 1rem;
  --ff-type-control: 0.875rem;
  --ff-type-secondary: 0.75rem;
  --ff-type-caption: 0.6875rem;
  --ff-control-height: 2.5rem;
  --ff-panel-padding: 1.5rem;
  --ff-color-surface: #f1f0e9;
  --ff-color-surface-raised: #f7f6f0;
  --ff-color-surface-inset: #f7f6f0;
  --ff-color-text: #272b28;
  --ff-color-text-muted: #5e625b;
  --ff-color-border: #cacdc5;
  --ff-color-border-control: #81877b;
  --ff-color-hover: #e8e9e2;
  --ff-color-selected: #e3e6de;
  --ff-color-accent: #17382e;
  --ff-color-on-accent: #f1f0e9;
  --ff-color-focus: #426638;
  --ff-color-note: #dfe7d3;
  --ff-color-note-fold: #a7b89b;
  --ff-color-shadow: #08180e24;
  --ff-canvas-surface: #101b17;
  --ff-canvas-text: #dce6d0;
  --ff-canvas-text-muted: #a6b79c;
  --ff-canvas-control: #18261e;
  --ff-canvas-border: #6b8060;
  --ff-canvas-selection: #b9caaf;
  --ff-canvas-grid: #9aae8736;
  --ff-color-chrome: #f1f0e9;
  --ff-color-danger: #9c3034;
  --ff-color-danger-surface: #f4e7e3;
  --ff-color-warning: #77521b;
  --ff-color-warning-surface: #f0e7d4;
  --ff-color-success: #17382e;
  --ff-color-success-surface: #e3e6de;
}

[data-ff-density="dense"] {
  --ff-type-body: 0.875rem;
  --ff-type-control: 0.8125rem;
  --ff-type-secondary: 0.75rem;
  --ff-type-caption: 0.6875rem;
  --ff-control-height: 2.375rem;
  --ff-panel-padding: 1.25rem;
}

[data-ff-density="default"] {
  --ff-type-body: 1rem;
  --ff-type-control: 0.875rem;
  --ff-type-secondary: 0.75rem;
  --ff-type-caption: 0.6875rem;
  --ff-control-height: 2.5rem;
  --ff-panel-padding: 1.5rem;
}

[data-ff-theme="dark"] {
  color-scheme: dark;
  --ff-color-surface: #202120;
  --ff-color-surface-raised: #2a2b29;
  --ff-color-surface-inset: #191a19;
  --ff-color-text: #e9e8e1;
  --ff-color-text-muted: #b2b3ac;
  --ff-color-border: #3d3f3b;
  --ff-color-border-control: #747670;
  --ff-color-hover: #2d2f2c;
  --ff-color-selected: #333532;
  --ff-color-accent: #b9caaf;
  --ff-color-on-accent: #172e24;
  --ff-color-focus: #c9dab8;
  --ff-color-note: #343630;
  --ff-color-note-fold: #666a61;
  --ff-color-shadow: #0005;
  --ff-canvas-surface: #101b17;
  --ff-canvas-text: #e3e3dc;
  --ff-canvas-text-muted: #a8aea3;
  --ff-canvas-control: #1c1e1c;
  --ff-canvas-border: #74786e;
  --ff-canvas-selection: #b9caaf;
  --ff-canvas-grid: #b5bcb22a;
  --ff-color-chrome: #1b1c1b;
  --ff-color-danger: #f1b6ad;
  --ff-color-danger-surface: #362524;
  --ff-color-warning: #e8c387;
  --ff-color-warning-surface: #352d20;
  --ff-color-success: #b9caaf;
  --ff-color-success-surface: #333532;
}

@media (prefers-color-scheme: dark) {
[data-ff-theme="system"] {
  color-scheme: dark;
  --ff-color-surface: #202120;
  --ff-color-surface-raised: #2a2b29;
  --ff-color-surface-inset: #191a19;
  --ff-color-text: #e9e8e1;
  --ff-color-text-muted: #b2b3ac;
  --ff-color-border: #3d3f3b;
  --ff-color-border-control: #747670;
  --ff-color-hover: #2d2f2c;
  --ff-color-selected: #333532;
  --ff-color-accent: #b9caaf;
  --ff-color-on-accent: #172e24;
  --ff-color-focus: #c9dab8;
  --ff-color-note: #343630;
  --ff-color-note-fold: #666a61;
  --ff-color-shadow: #0005;
  --ff-canvas-surface: #101b17;
  --ff-canvas-text: #e3e3dc;
  --ff-canvas-text-muted: #a8aea3;
  --ff-canvas-control: #1c1e1c;
  --ff-canvas-border: #74786e;
  --ff-canvas-selection: #b9caaf;
  --ff-canvas-grid: #b5bcb22a;
  --ff-color-chrome: #1b1c1b;
  --ff-color-danger: #f1b6ad;
  --ff-color-danger-surface: #362524;
  --ff-color-warning: #e8c387;
  --ff-color-warning-surface: #352d20;
  --ff-color-success: #b9caaf;
  --ff-color-success-surface: #333532;
}
}

[data-ff-canvas="paper"] {
  --ff-canvas-surface: #e6e9de;
  --ff-canvas-text: #172e24;
  --ff-canvas-text-muted: #475c47;
  --ff-canvas-selection: #17382e;
  --ff-canvas-grid: #60745155;
}

@media (prefers-reduced-motion: reduce) {
.ff-theme, [data-ff-theme] {
  --ff-duration-fast: 0ms;
  --ff-duration-normal: 0ms;
}
}