/* Freelume/ — generated from tokens.json */
/* Do not edit: run design/build_tokens.py */

:root {
  --ff-white: #ffffff;
  --ff-gray-50: #f9fafb;
  --ff-gray-100: #f3f4f6;
  --ff-gray-200: #e5e7eb;
  --ff-gray-300: #d1d5db;
  --ff-gray-400: #9ca3af;
  --ff-gray-500: #6b7280;
  --ff-gray-600: #4b5563;
  --ff-gray-700: #374151;
  --ff-gray-800: #1f2937;
  --ff-gray-900: #111827;
  --ff-blue-50: #eff6ff;
  --ff-blue-100: #dbeafe;
  --ff-blue-600: #2563eb;
  --ff-blue-700: #1d4ed8;
  --ff-gold-50: #fdf6e3;
  --ff-gold-200: #f5dfa0;
  --ff-gold-400: #f2be3a;
  --ff-gold-500: #e6a817;
  --ff-gold-700: #9a6700;
  --ff-gold-800: #7a5300;
  --ff-gold-900: #3d2a00;
  --ff-green-50: #ecfdf5;
  --ff-green-600: #059669;
  --ff-green-800: #065f46;
  --ff-amber-50: #fffbeb;
  --ff-amber-500: #f59e0b;
  --ff-amber-700: #b45309;
  --ff-amber-800: #92400e;
  --ff-red-50: #fef2f2;
  --ff-red-600: #dc2626;
  --ff-red-700: #b91c1c;
  --ff-red-800: #991b1b;
  --ff-teal-50: #f0fdfa;
  --ff-teal-700: #0f766e;
  --ff-teal-800: #115e59;
  --ff-surface-page: var(--ff-gray-50);
  --ff-surface-card: var(--ff-white);
  --ff-surface-group: var(--ff-gray-50);
  --ff-surface-sunken: var(--ff-gray-100);
  --ff-border: var(--ff-gray-200);
  --ff-border-strong: var(--ff-gray-300);
  --ff-disabled: var(--ff-gray-300);
  --ff-text-strong: var(--ff-gray-900);
  --ff-text-body: var(--ff-gray-700);
  --ff-text-label: var(--ff-gray-600);
  --ff-text-muted: var(--ff-gray-500);
  --ff-icon-quiet: var(--ff-gray-400);
  --ff-action: var(--ff-blue-600);
  --ff-action-hover: var(--ff-blue-700);
  --ff-action-subtle: var(--ff-blue-50);
  --ff-text-on-action: var(--ff-white);
  --ff-focus-ring: var(--ff-blue-600);
  --ff-focus-halo: var(--ff-blue-100);
  --ff-secondary-bg: var(--ff-gray-200);
  --ff-secondary-bg-hover: var(--ff-gray-300);
  --ff-secondary-text: var(--ff-gray-800);
  --ff-danger: var(--ff-red-600);
  --ff-danger-hover: var(--ff-red-700);
  --ff-overlay: rgba(17, 24, 39, 0.5);
  --ff-hover-wash: rgba(17, 24, 39, 0.05);
  --ff-spinner-track: rgba(17, 24, 39, 0.15);
  --ff-spinner-track-on-fill: rgba(255, 255, 255, 0.3);
  --ff-stage-unbilled-bg: var(--ff-gold-50);
  --ff-stage-unbilled-icon: var(--ff-gold-700);
  --ff-stage-unbilled-text: var(--ff-gold-800);
  --ff-status-draft-bg: var(--ff-gray-100);
  --ff-status-draft-text: var(--ff-gray-700);
  --ff-status-sent-bg: var(--ff-blue-50);
  --ff-status-sent-icon: var(--ff-blue-600);
  --ff-status-sent-text: var(--ff-blue-700);
  --ff-status-overdue-bg: var(--ff-red-50);
  --ff-status-overdue-icon: var(--ff-red-700);
  --ff-status-overdue-text: var(--ff-red-800);
  --ff-status-paid-bg: var(--ff-green-50);
  --ff-status-paid-icon: var(--ff-green-600);
  --ff-status-paid-text: var(--ff-green-800);
  --ff-status-credit-bg: var(--ff-red-50);
  --ff-status-credit-text: var(--ff-red-800);
  --ff-status-booked-bg: var(--ff-teal-50);
  --ff-status-booked-icon: var(--ff-teal-700);
  --ff-status-booked-text: var(--ff-teal-800);
  --ff-feedback-success-bg: var(--ff-green-50);
  --ff-feedback-success-icon: var(--ff-green-600);
  --ff-feedback-warning-bg: var(--ff-amber-50);
  --ff-feedback-warning-icon: var(--ff-amber-700);
  --ff-feedback-warning-text: var(--ff-amber-800);
  --ff-feedback-warning-fill: var(--ff-amber-500);
  --ff-feedback-error-bg: var(--ff-red-50);
  --ff-feedback-error-icon: var(--ff-red-700);
  --ff-feedback-info-bg: var(--ff-blue-50);
  --ff-feedback-info-icon: var(--ff-blue-600);
  --ff-harvest-top: var(--ff-gold-400);
  --ff-chart-billed: var(--ff-blue-600);
  --ff-chart-unbilled: var(--ff-gold-500);
  --ff-harvest-bottom: var(--ff-gold-500);
  --ff-harvest-text: var(--ff-gold-900);
  --ff-shadow-card: 0 1px 2px rgba(17, 24, 39, 0.06), 0 0 0 1px rgba(17, 24, 39, 0.04);
  --ff-shadow-popover: 0 8px 24px rgba(17, 24, 39, 0.12);
  --ff-shadow-modal: 0 24px 48px rgba(17, 24, 39, 0.18);
  --ff-shadow-raised: 0 8px 20px rgba(37, 99, 235, 0.35);
  --ff-shadow-lift: 0 2px 6px rgba(17, 24, 39, 0.12);
  --ff-shadow-segment: 0 1px 2px rgba(17, 24, 39, 0.1);
}

:root {
  --ff-space-1: 4px;
  --ff-space-2: 8px;
  --ff-space-3: 12px;
  --ff-space-4: 16px;
  --ff-space-6: 24px;
  --ff-space-8: 32px;
  --ff-space-12: 48px;
  --ff-space-16: 64px;
  --ff-radius-xs: 2px;
  --ff-radius-sm: 6px;
  --ff-radius-md: 8px;
  --ff-radius-lg: 12px;
  --ff-radius-pill: 999px;
  --ff-tap-target: 44px;
  --ff-control-height: 44px;
  --ff-control-height-touch: 48px;
  --ff-topbar-height: 64px;
  --ff-tabbar-height: 64px;
  --ff-fab-size: 56px;
  --ff-fab-rise: 10px;
  --ff-fab-ring: 5px;
  --ff-container-max: 1200px;
  --ff-modal-max: 560px;
  --ff-form-max: 720px;
  --ff-modal-max-large: 800px;
  --ff-icon-sm: 16px;
  --ff-icon-md: 20px;
  --ff-icon-lg: 22px;
  --ff-chip-size: 32px;
  --ff-duration-fast: 120ms;
  --ff-duration-base: 200ms;
  --ff-duration-slow: 280ms;
  --ff-duration-spin: 600ms;
  --ff-duration-attention: 500ms;
  --ff-delay-attention: 1s;
  --ff-ease: cubic-bezier(0.2, 0, 0, 1);
  --ff-z-popover: 50;
  --ff-z-nav: 100;
  --ff-z-modal: 200;
  --ff-z-toast: 300;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.ff-type-title {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.ff-type-heading {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
}

.ff-type-body-lg {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.ff-type-body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.ff-type-small {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}

.ff-type-caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

.ff-type-money-display {
  font-family: var(--font-mono);
  font-size: 32px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.ff-type-money {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.ff-type-number {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}

.ff-type-wordmark {
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}