:root {
	--ff-color-white: #ffffff;
	--ff-color-slate-50: #f8fafc;
	--ff-color-slate-75: #f4f6f8;
	--ff-color-slate-300: #b9c2d6;
	--ff-color-slate-400: #8b93a7;
	--ff-color-gray-100: #f3f4f6;
	--ff-color-gray-150: #edf0f3;
	--ff-color-gray-175: #eef0f3;
	--ff-color-gray-200: #e5e7eb;
	--ff-color-gray-300: #d1d5db;
	--ff-color-gray-500: #6b7280;
	--ff-color-gray-600: #4b5563;
	--ff-color-gray-700: #374151;
	--ff-color-gray-800: #1f2937;
	--ff-color-gray-900: #111827;
	--ff-color-ink: #0b1220;
	--ff-color-navy-1000: #001e55;
	--ff-color-navy-950: #07111f;
	--ff-color-navy-900: #111f38;
	--ff-color-navy-800: #16213e;
	--ff-color-navy-750: #1a2740;
	--ff-color-navy-700: #1b2a4a;
	--ff-color-blue-50: #eff6ff;
	--ff-color-blue-100: #dbeafe;
	--ff-color-blue-200: #bfdbfe;
	--ff-color-blue-300: #93c5fd;
	--ff-color-blue-600: #2563eb;
	--ff-color-blue-700: #1d4ed8;
	--ff-color-blue-800: #1e40af;
	--ff-color-green-50: #f0fdf4;
	--ff-color-green-75: #f0f7f2;
	--ff-color-green-100: #eef8f1;
	--ff-color-green-150: #dcfce7;
	--ff-color-green-200: #bbf7d0;
	--ff-color-green-600: #16a34a;
	--ff-color-green-700: #15803d;
	--ff-color-green-800: #166534;
	--ff-color-amber-50: #fffbeb;
	--ff-color-amber-75: #fff7e6;
	--ff-color-amber-100: #fef3c7;
	--ff-color-amber-150: #f1e4c2;
	--ff-color-amber-200: #f5d98b;
	--ff-color-amber-500: #f59e0b;
	--ff-color-amber-700: #b45309;
	--ff-color-amber-800: #92400e;
	--ff-color-amber-900: #78350f;
	--ff-color-red-50: #fff5f5;
	--ff-color-red-600: #dc2626;
	--ff-color-red-700: #b91c1c;
	--ff-color-indigo-50: #eef2ff;

	--ff-rgb-white: 255 255 255;
	--ff-rgb-black: 0 0 0;
	--ff-rgb-gray-900: 17 24 39;
	--ff-rgb-slate-900: 15 23 42;
	--ff-rgb-slate-50: 248 250 252;
	--ff-rgb-blue-600: 37 99 235;
	--ff-rgb-blue-300: 147 197 253;
	--ff-rgb-green-600: 22 163 74;
	--ff-rgb-navy-950: 7 17 31;

	--ff-font-sans: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--ff-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	--ff-font-caption: 11px;
	--ff-font-meta: 12px;
	--ff-font-small: 13px;
	--ff-font-body: 14px;
	--ff-font-card-title: 15px;
	--ff-line-tight: 1.35;
	--ff-line-normal: 1.5;
	--ff-line-relaxed: 1.7;
	--ff-line-reading: 1.8;

	--ff-bg-page: var(--ff-color-slate-75);
	--ff-bg-surface: var(--ff-color-white);
	--ff-bg-surface-alt: var(--ff-color-slate-50);
	--ff-bg-navy: var(--ff-color-navy-950);
	--ff-bg-green-soft: var(--ff-color-green-100);
	--ff-bg-blue-soft: var(--ff-color-blue-50);
	--ff-bg-amber-soft: var(--ff-color-amber-75);
	--ff-bg-danger-soft: var(--ff-color-red-50);
	--ff-bg-control: var(--ff-color-gray-100);
	--ff-bg-icon-info: var(--ff-color-blue-100);
	--ff-bg-icon-safe: var(--ff-color-green-150);
	--ff-bg-icon-caution: var(--ff-color-amber-100);

	--ff-text-primary: var(--ff-color-gray-900);
	--ff-text-body: var(--ff-color-gray-700);
	--ff-text-secondary: var(--ff-color-gray-600);
	--ff-text-muted: var(--ff-color-gray-500);
	--ff-text-inverse: var(--ff-color-white);
	--ff-text-inverse-muted: var(--ff-color-slate-300);

	--ff-border-default: var(--ff-color-gray-200);
	--ff-border-strong: var(--ff-color-gray-300);
	--ff-border-info: var(--ff-color-blue-200);
	--ff-border-safe: var(--ff-color-green-200);
	--ff-border-caution: var(--ff-color-amber-200);

	--ff-action-primary: var(--ff-color-ink);
	--ff-action-guide: var(--ff-color-blue-600);
	--ff-action-guide-hover: var(--ff-color-blue-700);
	--ff-action-guide-strong: var(--ff-color-blue-700);
	--ff-action-safe: var(--ff-color-green-600);
	--ff-action-safe-strong: var(--ff-color-green-700);
	--ff-action-warning: var(--ff-color-amber-500);
	--ff-action-warning-strong: var(--ff-color-amber-700);
	--ff-action-danger: var(--ff-color-red-600);

	--ff-radius-xs: 4px;
	--ff-radius-sm: 6px;
	--ff-radius-md: 8px;
	--ff-radius-9: 9px;
	--ff-radius-lg: 10px;
	--ff-radius-xl: 12px;
	--ff-radius-2xl: 14px;
	--ff-radius-3xl: 16px;
	--ff-radius-4xl: 20px;
	--ff-radius-pill: 999px;

	--ff-space-0-5: 2px;
	--ff-space-0-75: 3px;
	--ff-space-1: 4px;
	--ff-space-1-25: 5px;
	--ff-space-1-5: 6px;
	--ff-space-1-75: 7px;
	--ff-space-2: 8px;
	--ff-space-2-25: 9px;
	--ff-space-2-5: 10px;
	--ff-space-2-75: 11px;
	--ff-space-3: 12px;
	--ff-space-3-25: 13px;
	--ff-space-3-5: 14px;
	--ff-space-3-75: 15px;
	--ff-space-4: 16px;
	--ff-space-4-5: 18px;
	--ff-space-5: 20px;
	--ff-space-5-5: 22px;
	--ff-space-6: 24px;
	--ff-space-6-5: 26px;
	--ff-space-7: 28px;
	--ff-space-7-5: 30px;
	--ff-space-8: 32px;
	--ff-space-9: 36px;
	--ff-space-9-5: 38px;
	--ff-space-10: 40px;
	--ff-space-11: 44px;
	--ff-space-12: 48px;
	--ff-space-14: 56px;
	--ff-space-16: 64px;
	--ff-space-17-5: 70px;
	--ff-space-18: 72px;
	--ff-space-19: 76px;
	--ff-space-20: 80px;
	--ff-space-22: 88px;
	--ff-space-24: 96px;

	--ff-container: 1200px;
	--ff-container-narrow: 760px;
	--ff-sidebar: 320px;
	--ff-header-height: 72px;
	--ff-gutter-desktop: var(--ff-space-10);
	--ff-gutter-mobile: var(--ff-space-5);

	--ff-shadow-card: 0 1px 2px rgb(var(--ff-rgb-slate-900) / .06), 0 1px 3px rgb(var(--ff-rgb-slate-900) / .08);
	--ff-shadow-feature: 0 12px 28px rgb(var(--ff-rgb-slate-900) / .16);
	--ff-shadow-floating: 0 18px 40px rgb(var(--ff-rgb-slate-900) / .18);
	--ff-focus-ring: 0 0 0 3px rgb(var(--ff-rgb-blue-600) / .25);
	--ff-transition: 160ms ease;
}