:root {
  --design-bg-base: #f4f6fa;
  --design-bg-surface: #ffffff;
  --design-bg-surface-2: #eef2f8;
  --design-bg-elevated: #ffffff;
  --design-bg-input: #ffffff;
  --design-border: #e3e8f0;
  --design-border-strong: #cdd6e3;
  --design-border-subtle: #eef1f6;
  --design-text-primary: #18233a;
  --design-text-secondary: #51617b;
  --design-text-muted: #8190a4;
  --design-text-inverse: #ffffff;
  --design-accent-h: 265;
  --design-accent-c: 0.16;
  --design-accent: oklch(0.58 var(--design-accent-c) var(--design-accent-h));
  --design-accent-hover: oklch(0.52 var(--design-accent-c) var(--design-accent-h));
  --design-accent-press: oklch(0.46 var(--design-accent-c) var(--design-accent-h));
  --design-accent-tint: oklch(0.58 var(--design-accent-c) var(--design-accent-h) / 0.12);
  --design-accent-tint-2: oklch(0.58 var(--design-accent-c) var(--design-accent-h) / 0.2);
  --design-success: oklch(0.52 0.13 156);
  --design-danger: oklch(0.55 0.2 25);
  --design-warning: oklch(0.58 0.12 70);
  --design-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --design-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --design-fs-2xl: 22px;
  --design-fs-xl: 18px;
  --design-fs-lg: 16px;
  --design-fs-base: 14px;
  --design-fs-sm: 13px;
  --design-fs-xs: 12px;
  --design-fs-2xs: 11px;
  --design-lh-base: 1.55;
  --design-sp-1: 4px;
  --design-sp-2: 8px;
  --design-sp-3: 12px;
  --design-sp-4: 16px;
  --design-sp-5: 20px;
  --design-sp-6: 24px;
  --design-sp-8: 32px;
  --design-sp-10: 40px;
  --design-sp-12: 48px;
  --design-r-sm: 4px;
  --design-r-md: 6px;
  --design-r-lg: 8px;
  --design-r-xl: 12px;
  --design-r-pill: 999px;
  --design-shadow-sm: 0 1px 2px rgba(16, 32, 64, 0.08);
  --design-shadow-md: 0 8px 24px rgba(16, 32, 64, 0.12);
  --design-shadow-lg: 0 24px 64px rgba(16, 32, 64, 0.18);
  --design-focus-ring: 0 0 0 2px var(--design-bg-base), 0 0 0 4px var(--design-accent);
  --design-sidebar-width: 248px;
  --design-sidebar-width-collapsed: 64px;
  /* デスクトップ固定レイアウト用。これ未満は横スクロール */
  --design-min-width: 1280px;
}

[data-theme="dark"] {
  --design-bg-base: #0a101c;
  --design-bg-surface: #0f1828;
  --design-bg-surface-2: #13203360;
  --design-bg-elevated: #16233b;
  --design-bg-input: #0c1524;
  --design-border: #1f2c44;
  --design-border-strong: #2b3b59;
  --design-border-subtle: #18243a;
  --design-text-primary: #e8eef7;
  --design-text-secondary: #9db0cb;
  --design-text-muted: #65768f;
  --design-text-inverse: #08101e;
  --design-accent-cd: 0.18;
  --design-accent: oklch(0.72 var(--design-accent-cd) var(--design-accent-h));
  --design-accent-hover: oklch(0.78 var(--design-accent-cd) var(--design-accent-h));
  --design-accent-press: oklch(0.66 var(--design-accent-cd) var(--design-accent-h));
  --design-accent-tint: oklch(0.72 var(--design-accent-cd) var(--design-accent-h) / 0.14);
  --design-accent-tint-2: oklch(0.72 var(--design-accent-cd) var(--design-accent-h) / 0.22);
  --design-success: oklch(0.73 0.15 156);
  --design-danger: oklch(0.64 0.21 25);
  --design-warning: oklch(0.8 0.13 78);
  --design-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --design-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --design-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
  --design-focus-ring: 0 0 0 2px var(--design-bg-base), 0 0 0 4px var(--design-accent);
}