/*
 * manavigate — Design tokens (Phase 1a)
 * 方向性「紙と墨 / Editorial Light」
 * 色・書体・寸法の値はこのファイルにだけ書く（他のCSSでリテラル色を使わない）。
 *
 * Breakpoints (media query では変数が使えないため値で記載)
 *   --bp-sm 600px (37.5em) / --bp-md 900px (56.25em) / --bp-lg 1080px (67.5em) / --bp-xl 1280px (80em)
 */

:root {
  /* ---- Color: paper & ink ---- */
  --color-paper: #F6F4EF;
  --color-paper-deep: #ECEAE4;
  --color-surface: #FFFFFF;
  --color-ink: #1B1B19;          /* paper 15.69 : 1 */
  --color-ink-2: #45433E;        /* paper  8.99 : 1 */
  --color-ink-3: #67645C;        /* paper  5.38 : 1（14px以上） */
  --color-line: #D6D1C6;         /* 装飾罫のみ */
  --color-line-strong: #7E796E;  /* UI境界・図のノード（文字には使わない） */

  /* ---- Color: accent (藍) ---- */
  --color-accent: #1F4E6E;       /* paper 8.05 / 白文字 8.85 */
  --color-accent-hover: #163B54;
  --color-accent-tint: #E3E9EF;

  /* ---- Color: night (footer / 墨の帯) ---- */
  --color-night: #15181C;
  --color-night-ink: #EAE6DD;    /* night 14.30 : 1 */
  --color-night-ink-2: #A8A49B;  /* night  7.16 : 1 */
  --color-night-line: #3A3E45;   /* 装飾罫のみ */
  --color-accent-on-night: #A3BDD3;

  /* ---- Color: state ---- */
  --color-error: #9B2B2B;
  --color-success: #2E5D45;

  /* ---- Typography ---- */
  --font-latin: "Inter";
  --font-jp-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic, Meiryo, sans-serif;
  --font-sans: var(--font-latin), var(--font-jp-sans);
  --font-serif-fallback: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --font-heading: "Shippori Mincho", var(--font-serif-fallback);
  --heading-weight: 500;
  --heading-tracking: 0.04em;

  /* fluid scale: 360px → 1440px */
  --fs-display: clamp(2rem, 1.35rem + 3.8vw, 4.25rem);
  --fs-h1: clamp(1.875rem, 1.5rem + 1.667vw, 3rem);
  --fs-h2: clamp(1.5rem, 1.208rem + 1.296vw, 2.375rem);
  --fs-h3: clamp(1.1875rem, 1.083rem + 0.463vw, 1.5rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.278vw, 1.25rem);
  --fs-body: clamp(1rem, 0.979rem + 0.093vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;
  --fs-caption: 0.75rem;
  --fs-stat: clamp(2.5rem, 2.083rem + 1.852vw, 3.75rem);

  --lh-display: 1.35;
  --lh-heading: 1.45;
  --lh-h3: 1.55;
  --lh-lead: 1.85;
  --lh-body: 1.9;
  --measure: 38em;

  /* ---- Space (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-section: clamp(4rem, 2.667rem + 5.926vw, 8rem);
  --gutter: clamp(1rem, 0.333rem + 2.963vw, 2.5rem);
  --container: 75rem;
  --container-narrow: 46rem;
  --header-h: 4rem;
  --form-embed-h: clamp(20rem, 85vh, 56rem); /* Google フォームの枠。画面の高さの 85% まで（下限 320px）にして、ページ側をスクロールできる余地を残す */

  /* ---- Rules, radius, focus ---- */
  --rule-hair: 1px solid var(--color-line);
  --rule-ui: 1px solid var(--color-line-strong);
  --rule-ink: 2px solid var(--color-ink);
  --radius-control: 2px;
  --focus-ring: 2px solid var(--color-accent);
  --focus-offset: 3px;

  /* ---- Motion ---- */
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-reveal: 400ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ツールバーの出入りで高さが変わるスマートフォンでは、小さいほうの表示領域を基準にする */
@supports (height: 1svh) {
  :root { --form-embed-h: clamp(20rem, 85svh, 56rem); }
}

@media (max-width: 56.249em) {
  :root { --header-h: 3.5rem; }
}

/* 見出し書体の比較（Phase 1a のみ）。本採用時は1種に確定する */
:root[data-font="b1"] { --font-heading: "Shippori Mincho B1", var(--font-serif-fallback); }
:root[data-font="noto"] { --font-heading: "Noto Serif JP", var(--font-serif-fallback); }
:root[data-font="gothic"] {
  --font-heading: var(--font-jp-sans);
  --heading-weight: 500;
  --heading-tracking: 0.02em;
}