/* =====================================================================
   tokens.css — theme.json が生成する CSS 変数を、component CSS が使う短い名前へ橋渡しする。
   単一正典は theme.json（settings.color.palette / typography / spacing / custom.rm）。
   OWNER Design Console は「--wp--preset--*」「--wp--custom--rm--*」だけを上書きするので、
   注意（Runtime Gate 2026-09-14）: WordPress は preset slug を kebab-case に正規化する（h1 → h-1、s5 → s-5）。
   slug は英字だけにする（heading-l / md など）。数字入り slug を使うと変数名が食い違い、無言で効かなくなる。
   ここと components.css は触らずに、1 か所の変更が全ページへ反映される。
   ===================================================================== */
:root {
  /* color */
  --ink: var(--wp--preset--color--ink);
  --ink-2: var(--wp--preset--color--ink-2);
  --ink-3: var(--wp--preset--color--ink-3);
  --bg: var(--wp--preset--color--bg);
  --paper: var(--wp--preset--color--paper);
  --sand: var(--wp--preset--color--sand);
  --sand-2: var(--wp--preset--color--sand-2);
  --teal: var(--wp--preset--color--teal);
  --teal-dark: var(--wp--preset--color--teal-dark);
  --teal-soft: var(--wp--preset--color--teal-soft);
  --teal-mid: var(--wp--preset--color--teal-mid);
  --coral: var(--wp--preset--color--coral);
  --coral-dark: var(--wp--preset--color--coral-dark);
  --coral-soft: var(--wp--preset--color--coral-soft);
  --warn: var(--wp--preset--color--warn);
  --warn-soft: var(--wp--preset--color--warn-soft);
  --line: var(--wp--preset--color--line);
  --focus: var(--wp--preset--color--teal);
  /* typography */
  --font: var(--wp--preset--font-family--jp);
  --font-latin: var(--wp--preset--font-family--latin);
  --fs: var(--wp--preset--font-size--body);
  --fs-s: var(--wp--preset--font-size--small);
  --fs-meta: var(--wp--preset--font-size--meta);
  --fs-lead: var(--wp--preset--font-size--lead);
  --fs-h1: var(--wp--preset--font-size--heading-l);
  --fs-h1-pc: var(--wp--preset--font-size--display);
  --fs-h2: var(--wp--preset--font-size--heading-m);
  --fs-h3: var(--wp--preset--font-size--heading-s);
  --lh: var(--wp--custom--rm--line-height--body);
  --lh-heading: var(--wp--custom--rm--line-height--heading);
  --fw-heading: var(--wp--custom--rm--font-weight--heading);
  /* spacing */
  --s2: var(--wp--preset--spacing--xxs);
  --s3: var(--wp--preset--spacing--xs);
  --s4: var(--wp--preset--spacing--sm);
  --s5: var(--wp--preset--spacing--md);
  --s6: var(--wp--preset--spacing--lg);
  --s7: var(--wp--preset--spacing--xl);
  --s8: var(--wp--preset--spacing--xxl);
  --rm-section-pad: var(--wp--custom--rm--section--padding);
  --rm-section-pad-sp: var(--wp--custom--rm--section--padding-mobile);
  --rm-card-gap: var(--wp--custom--rm--card--gap);
  /* layout */
  --site: var(--wp--style--global--wide-size);
  --narrow: var(--wp--style--global--content-size);
  --rm-header-h: var(--wp--custom--rm--header--height);
  /* shape */
  --radius: var(--wp--custom--rm--radius--card);
  --radius-s: var(--wp--custom--rm--radius--small);
  --radius-pill: var(--wp--custom--rm--radius--pill);
  --shadow: var(--wp--custom--rm--shadow--card);
  --shadow-up: var(--wp--custom--rm--shadow--up);
  --line-w: var(--wp--custom--rm--line--width);
  --rm-btn-h: var(--wp--custom--rm--button--height);
  --rm-btn-h-sm: var(--wp--custom--rm--button--height-small);
  --focus-w: var(--wp--custom--rm--focus--width);
}