/**
 * AI相談 Design System v1
 * Canonical semantic tokens shared by the public site and admin tools.
 * Values describe meaning rather than individual pages so every surface can
 * evolve without creating another brand palette.
 */
:root {
  color-scheme: light;

  /* Brand and neutral color */
  --ai-color-brand-50: #f4f6ff;
  --ai-color-brand-100: #e9efff;
  --ai-color-brand-200: #cbd4fa;
  --ai-color-brand-600: #4261c7;
  --ai-color-brand-700: #3e58b8;
  --ai-color-brand-800: #304591;
  --ai-color-ink: #172033;
  --ai-color-text: #263348;
  --ai-color-muted: #606d83;
  --ai-color-faint: #77849a;
  --ai-color-canvas: #f8fbff;
  --ai-color-surface: #ffffff;
  --ai-color-surface-soft: #f4f7fc;
  --ai-color-line: #dce4f2;
  --ai-color-line-strong: #b9c7db;
  --ai-color-white: #ffffff;

  /* Supporting accent and state color */
  --ai-color-accent-soft: #f1eeff;
  --ai-color-accent: #786bbd;
  --ai-color-success: #146c5a;
  --ai-color-success-soft: #e5f6f0;
  --ai-color-warning: #805c13;
  --ai-color-warning-soft: #fff4d6;
  --ai-color-danger: #a23a4c;
  --ai-color-danger-soft: #fff0f3;
  --ai-color-info: #3657bd;
  --ai-color-info-soft: #e9efff;
  --ai-color-focus: #263d91;

  /* Typography */
  --ai-font-sans: Inter, "Noto Sans JP", "Yu Gothic UI", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --ai-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --ai-font-size-xs: 0.75rem;
  --ai-font-size-sm: 0.875rem;
  --ai-font-size-md: 1rem;
  --ai-font-size-lg: 1.125rem;
  --ai-font-size-xl: 1.375rem;
  --ai-font-size-2xl: clamp(1.75rem, 3vw, 2.5rem);
  --ai-font-size-display: clamp(2.25rem, 5vw, 4.75rem);
  --ai-line-tight: 1.3;
  --ai-line-body: 1.75;
  --ai-weight-medium: 500;
  --ai-weight-bold: 700;
  --ai-weight-black: 900;

  /* Four-pixel spacing scale */
  --ai-space-1: 0.25rem;
  --ai-space-2: 0.5rem;
  --ai-space-3: 0.75rem;
  --ai-space-4: 1rem;
  --ai-space-5: 1.25rem;
  --ai-space-6: 1.5rem;
  --ai-space-8: 2rem;
  --ai-space-10: 2.5rem;
  --ai-space-12: 3rem;
  --ai-space-16: 4rem;
  --ai-space-20: 5rem;

  /* Shape, depth and motion */
  --ai-radius-control: 0.5rem;
  --ai-radius-panel: 0.75rem;
  --ai-radius-card: 1rem;
  --ai-radius-round: 999px;
  --ai-shadow-xs: 0 1px 2px rgba(39, 60, 104, 0.06);
  --ai-shadow-sm: 0 8px 24px rgba(39, 60, 104, 0.08);
  --ai-shadow-md: 0 18px 48px rgba(39, 60, 104, 0.14);
  --ai-focus-ring: 0 0 0 3px rgba(66, 97, 199, 0.28);
  --ai-duration-fast: 140ms;
  --ai-duration-standard: 220ms;
  --ai-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Layout */
  --ai-size-tap: 44px;
  --ai-size-header-public: 74px;
  --ai-size-header-admin: 64px;
  --ai-container-public: 1400px;
  --ai-container-admin: 1240px;
  --ai-container-reading: 760px;
  --ai-page-gutter: clamp(1rem, 3vw, 2rem);
}