/* ---------------------------------------------------------
   tokens.css — design tokens (white-based, low saturation)
--------------------------------------------------------- */
:root {
  /* --- Surfaces --- */
  --color-bg: #ffffff;
  --color-surface: #f7f7f5;
  --color-surface-2: #efeee9;

  /* --- Text --- */
  --color-text: #1a1a1a;
  --color-ink: #38352f; /* long-form body copy — softer than text, stronger than muted */
  --color-muted: #6b6b6b;
  --color-faint: #9a9893;

  /* --- Lines / borders --- */
  --color-line: #e5e3de;

  /* --- Accent (low saturation, warm taupe) --- */
  --color-accent: #8a7d6b;
  --color-accent-dark: #6e6253;
  --color-accent-soft: #f1ede6;

  /* Header / footer text — a slightly darker brown than the accent */
  --color-brand-text: #6b5d48;

  /* --- Typography --- */
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;

  --fs-300: 0.8125rem;   /* 13px */
  --fs-400: 0.9375rem;   /* 15px */
  --fs-500: 1.0625rem;   /* 17px */
  --fs-600: clamp(1.25rem, 0.9rem + 1.4vw, 1.75rem);
  --fs-700: clamp(1.6rem, 1.1rem + 2.2vw, 2.5rem);
  --fs-800: clamp(2rem, 1.2rem + 3.6vw, 3.5rem);

  --tracking-wide: 0.08em;
  --tracking-wider: 0.18em;

  /* --- Spacing scale --- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6.5rem;

  /* --- Layout --- */
  --container: 1120px;
  --container-narrow: 760px;
  --radius: 2px;
  --radius-lg: 6px;

  /* --- Effects --- */
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-md: 0 8px 30px rgba(26, 26, 26, 0.07);
  --transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);

  --header-h: 64px;
}

@media (min-width: 768px) {
  :root {
    --header-h: 80px;
  }
}