:root {
    --jf-color-white: #ffffff;
    --jf-color-neutral-50: #f8fafc;
    --jf-color-neutral-100: #f1f5f9;
    --jf-color-neutral-200: #e2e8f0;
    --jf-color-neutral-300: #cbd5e1;
    --jf-color-neutral-500: #64748b;
    --jf-color-neutral-600: #475569;
    --jf-color-neutral-700: #334155;
    --jf-color-neutral-800: #1e293b;
    --jf-color-neutral-900: #0f172a;
    --jf-color-neutral-950: #020617;
    --jf-color-brand-50: #fff7f7;
    --jf-color-brand-100: #fee2e2;
    --jf-color-brand-600: #b91c1c;
    --jf-color-brand-700: #991b1b;
    --jf-color-red-50: #fef2f2;
    --jf-color-red-200: #fecaca;
    --jf-color-red-600: #dc2626;
    --jf-color-red-700: #b91c1c;
    --jf-color-green-50: #f0fdf4;
    --jf-color-green-200: #bbf7d0;
    --jf-color-green-700: #15803d;
    --jf-color-amber-50: #fffbeb;
    --jf-color-amber-200: #fde68a;
    --jf-color-amber-800: #92400e;
    --jf-color-blue-50: #eff6ff;
    --jf-color-blue-200: #bfdbfe;
    --jf-color-blue-700: #1d4ed8;
    --jf-color-purple-50: #faf5ff;
    --jf-color-purple-700: #7e22ce;

    --jf-font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --jf-font-family-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    --jf-font-size-caption: 0.75rem;
    --jf-font-size-small: 0.875rem;
    --jf-font-size-body: 1rem;
    --jf-font-size-body-large: 1.125rem;
    --jf-font-size-card-title: 1.125rem;
    --jf-font-size-section-title: 1.25rem;
    --jf-font-size-page-title: 1.875rem;
    --jf-font-size-statistic: 2.25rem;
    --jf-font-weight-regular: 400;
    --jf-font-weight-medium: 500;
    --jf-font-weight-semibold: 600;
    --jf-font-weight-bold: 700;
    --jf-line-height-tight: 1.2;
    --jf-line-height-normal: 1.5;
    --jf-line-height-relaxed: 1.65;

    --jf-space-0: 0;
    --jf-space-1: 4px;
    --jf-space-2: 8px;
    --jf-space-3: 12px;
    --jf-space-4: 16px;
    --jf-space-5: 20px;
    --jf-space-6: 24px;
    --jf-space-8: 32px;
    --jf-space-10: 40px;
    --jf-space-12: 48px;
    --jf-space-16: 64px;

    --jf-radius-none: 0;
    --jf-radius-sm: 6px;
    --jf-radius-md: 10px;
    --jf-radius-lg: 14px;
    --jf-radius-xl: 20px;
    --jf-radius-pill: 999px;
    --jf-radius-circle: 50%;

    --jf-shadow-none: none;
    --jf-shadow-subtle: 0 1px 2px rgba(15, 23, 42, 0.06);
    --jf-shadow-raised: 0 8px 24px rgba(15, 23, 42, 0.08);
    --jf-shadow-floating: 0 16px 40px rgba(15, 23, 42, 0.14);
    --jf-shadow-overlay: 0 24px 64px rgba(15, 23, 42, 0.22);

    --jf-border-width-default: 1px;
    --jf-border-width-strong: 2px;
    --jf-border-style-default: solid;

    --jf-motion-duration-instant: 0ms;
    --jf-motion-duration-fast: 120ms;
    --jf-motion-duration-normal: 200ms;
    --jf-motion-duration-slow: 300ms;
    --jf-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --jf-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
    --jf-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);

    --jf-layer-base: 0;
    --jf-layer-sticky: 1020;
    --jf-layer-header: 1030;
    --jf-layer-sidebar: 1040;
    --jf-layer-overlay: 1050;
    --jf-layer-modal: 1055;
    --jf-layer-dropdown: 1060;
    --jf-layer-toast: 1070;
    --jf-layer-tooltip: 1080;
    --jf-layer-critical: 1100;

    --jf-breakpoint-sm: 576px;
    --jf-breakpoint-md: 768px;
    --jf-breakpoint-lg: 992px;
    --jf-breakpoint-xl: 1200px;
    --jf-breakpoint-2xl: 1400px;

    --jf-color-surface-page: var(--jf-color-neutral-50);
    --jf-color-surface-primary: var(--jf-color-white);
    --jf-color-surface-secondary: var(--jf-color-neutral-100);
    --jf-color-surface-elevated: var(--jf-color-white);
    --jf-color-text-primary: var(--jf-color-neutral-900);
    --jf-color-text-secondary: var(--jf-color-neutral-600);
    --jf-color-text-muted: var(--jf-color-neutral-500);
    --jf-color-text-inverse: var(--jf-color-white);
    --jf-color-border-default: var(--jf-color-neutral-200);
    --jf-color-border-strong: var(--jf-color-neutral-300);
    --jf-color-border-subtle: rgba(15, 23, 42, 0.08);
    --jf-color-brand-primary: var(--jf-color-brand-600);
    --jf-color-brand-hover: var(--jf-color-brand-700);
    --jf-color-brand-active: var(--jf-color-brand-700);
    --jf-color-action-primary: var(--jf-color-brand-600);
    --jf-color-action-primary-hover: var(--jf-color-brand-700);
    --jf-color-action-secondary: var(--jf-color-neutral-700);
    --jf-color-status-success: var(--jf-color-green-700);
    --jf-color-status-success-surface: var(--jf-color-green-50);
    --jf-color-status-success-border: var(--jf-color-green-200);
    --jf-color-status-warning: var(--jf-color-amber-800);
    --jf-color-status-warning-surface: var(--jf-color-amber-50);
    --jf-color-status-warning-border: var(--jf-color-amber-200);
    --jf-color-status-danger: var(--jf-color-red-700);
    --jf-color-status-danger-surface: var(--jf-color-red-50);
    --jf-color-status-danger-border: var(--jf-color-red-200);
    --jf-color-status-info: var(--jf-color-blue-700);
    --jf-color-status-info-surface: var(--jf-color-blue-50);
    --jf-color-status-info-border: var(--jf-color-blue-200);
    --jf-color-status-neutral: var(--jf-color-neutral-600);
    --jf-color-status-neutral-surface: var(--jf-color-neutral-100);
    --jf-color-focus-ring: #2563eb;
    --jf-color-disabled-background: var(--jf-color-neutral-100);
    --jf-color-disabled-text: var(--jf-color-neutral-500);
    --jf-color-overlay-backdrop: rgba(2, 6, 23, 0.64);
    --jf-border-color-default: var(--jf-color-border-default);
    --jf-border-color-subtle: var(--jf-color-border-subtle);
    --jf-border-color-strong: var(--jf-color-border-strong);
    --jf-border-color-focus: var(--jf-color-focus-ring);
    --jf-border-color-error: var(--jf-color-status-danger);
}