:root{
  /* ===== Font families ===== */
  --font-sans: system-ui, -apple-system, "Segoe UI",
               "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Yu Gothic UI", "Yu Gothic", "Noto Sans JP",
               Meiryo, Arial, sans-serif;
  /* aliases (some code may reference these) */
  --font-family-sans: var(--font-sans);
  --font-family-mono: 'SFMono-Regular','Menlo','Consolas','Liberation Mono',monospace;

  /* ===== Font weights ===== */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ===== Font sizes (rem) ===== */
  /* keep both scales used across code */
  --font-size-xs: 0.75rem;  /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-md: 1rem;     /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem;  /* 20px */
  --font-size-2xl: 1.5rem;  /* 24px */
  --font-size-3xl: 1.875rem;/* 30px */
  --font-size-4xl: 2.25rem; /* 36px */

  /* optional larger map (if some samples used px comments) */
  /* --fs-xs:12px; --fs-sm:14px; --fs-md:16px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px; --fs-3xl:34px; */

  /* ===== Line heights ===== */
  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.7;

  /* ===== Brand (final) ===== */
  --brand-700:#1E3A8A; /* primary base */
  --brand-600:#274799; /* hover */

  /* ===== Neutral / Text ===== */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #f7f7f8;
  --color-neutral-100: #ebedf0;
  --color-neutral-200: #dcdfe5;
  --color-neutral-300: #c0c5ce;
  --color-neutral-400: #9da3af;
  --color-neutral-500: #7a828f;
  --color-neutral-600: #59606e;
  --color-neutral-700: #434957;
  --color-neutral-800: #2f3442;
  --color-neutral-900: #1e232f;

  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-inverse: #ffffff;

  /* ===== State colors ===== */
  --color-success-100:#e6f4ea; --color-success-500:#2f8f3a; --color-success-700:#1d6928;
  --color-warning-100:#fff4e5; --color-warning-500:#d97706; --color-warning-700:#a35703;
  --color-danger-100:#fde8e6;  --color-danger-500:#d93025; --color-danger-600:#c5221f; --color-danger-700:#a22117;
  --color-info-100:#e6f0ff;    --color-info-500:#2563eb;  --color-info-700:#1d4ed8;

  /* Optional primary palette tokens that map to brand */
  --color-primary-50:#eff6ff;
  --color-primary-100:#dbeafe;
  --color-primary-600: var(--brand-700);
  --color-primary-700: var(--brand-600);
  --color-primary-800:#162f6b;

  /* Surfaces / borders */
  --color-background:#f8fafc;
  --color-surface:#ffffff;
  --color-surface-subtle:#f1f5f9;
  --color-border:#d0d5dd;
  --color-border-strong:#98a2b3;

  /* ===== Spacing (8px base) ===== */
  /* numeric scale (HEAD 由来) */
  --space-0:0;
  --space-1:0.5rem;  /* 8px  */
  --space-2:0.75rem; /* 12px */
  --space-3:1rem;    /* 16px */
  --space-4:1.5rem;  /* 24px */
  --space-5:2rem;    /* 32px */
  --space-6:3rem;    /* 48px */
  --space-7:3.5rem;  /* 56px */
  --space-8:4rem;    /* 64px */
  /* aliases (PR-10.2 由来の記法に対応) */
  --space-xs: var(--space-2);
  --space-sm: var(--space-3);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);

  /* ===== Radius ===== */
  --radius-xs:4px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-pill:999px;

  /* ===== Shadows ===== */
  /* keep both light sets to avoid regressions */
  --shadow-xs:0 1px 2px rgba(15,23,42,0.08);
  --shadow-sm:0 1px 3px rgba(15,23,42,0.12), 0 1px 2px rgba(15,23,42,0.08);
  --shadow-md:0 4px 8px rgba(15,23,42,0.12), 0 2px 4px rgba(15,23,42,0.08);
  --shadow-lg:0 12px 32px rgba(14,30,37,0.18);

  /* ===== Breakpoints / Layout ===== */
  --breakpoint-sm:480px;
  --breakpoint-md:768px;
  --breakpoint-lg:1200px;
  /* aliases for previous code */
  --bp-sm: var(--breakpoint-sm);
  --bp-md: var(--breakpoint-md);
  --bp-lg: var(--breakpoint-lg);

  --container-max-width: 1200px;

  /* ===== Focus & controls ===== */
  --focus-ring-primary: rgba(30,58,138,0.35); /* brand-tinted */
  --focus-ring-danger:  rgba(220,38,38,0.28);
  --color-focus-ring: var(--focus-ring-primary);
  --focus-ring-width: 3px;
  --focus-outline-color: var(--focus-ring-primary);

  --control-height-sm: 2.5rem;
  --control-height-md: 2.75rem;
  --control-height-lg: 3.25rem;
  --control-padding-x: var(--space-md);
  --control-check-size: 1.125rem;
  --min-interactive-size: 44px;

  --opacity-disabled: 0.6;
  --border-width: 1px;
  --spinner-border-width: 2px;

  --transition-base: 150ms ease;
  --transition-slow: 250ms ease;
}