
:root {
  --space-xs: 4px;  --space-sm: 8px;  --space-md: 16px; --space-lg: 24px;
  --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px;
  --sec-pad: clamp(56px, 10vw, 96px);
  --container-max: 1280px; --content-readable: 720px; --grid-columns: 12; --grid-gutter: 24px;
  --fs-caption: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 20px; --fs-lg: 24px;
  --fs-xl: 30px; --fs-2xl: 36px; --fs-3xl: 48px; --fs-4xl: 60px; --fs-5xl: 72px;
  --lh-body: 1.6; --lh-heading: 1.2;
  --color-text: #1A1A1A; --color-text-sub: #555555; --color-bg: #FAFAFA;
  --brand-500: #1B2A4A;
  --color-success: #16A34A; --color-warning: #D97706; --color-error: #DC2626; --color-info: #2563EB;
  --color-fresh: #8B3A2F; 
  --radius-sm: 2px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 24px; --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow-md: 0 4px 6px rgba(0,0,0,.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.1); --shadow-xl: 0 20px 25px rgba(0,0,0,.1);
  --dur-micro: 150ms; --dur-base: 250ms; --dur-large: 400ms;
  --ease-out: cubic-bezier(0,0,0.2,1); --ease-in-out: cubic-bezier(0.4,0,0.2,1);
  --tap-min: 44px; --focus-ring: 2px solid var(--brand-500); --focus-offset: 2px; --disabled-opacity: 0.45;
  --font-heading: "Zen Old Mincho", "Noto Serif JP", serif;
  --font-en: "Jost", "Noto Sans JP", sans-serif;
}
:root {
  --brand-50:  color-mix(in srgb, var(--brand-500) 6%,  white);
  --brand-100: color-mix(in srgb, var(--brand-500) 12%, white);
  --brand-200: color-mix(in srgb, var(--brand-500) 24%, white);
  --brand-300: color-mix(in srgb, var(--brand-500) 40%, white);
  --brand-400: color-mix(in srgb, var(--brand-500) 70%, white);
  --brand-600: color-mix(in srgb, var(--brand-500) 85%, black);
  --brand-700: color-mix(in srgb, var(--brand-500) 70%, black);
  --brand-800: color-mix(in srgb, var(--brand-500) 55%, black);
  --brand-900: color-mix(in srgb, var(--brand-500) 42%, black);
}
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
