/* ==========================================================================
   SECT rebuild — _tokens.css
   デザイントークン + rem等比スケール（REBUILD-SPEC.md 第1章/第2章）
   ※ 二重DOM禁止 / 固定height禁止 / transform:scale によるページ拡縮禁止
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ルート方針（rem等比スケール）
   1rem = 10px 相当。全ての寸法は rem で書く。
   px 直書きは border 1px 等の極小値のみ。
   -------------------------------------------------------------------------- */
:root {
  font-size: 10px; /* 基準（TAB 768-1023px もこの固定値を使う） */
}

/* SP: 375px基準の等比スケール（~767px） */
@media (max-width: 767px) {
  :root {
    font-size: calc(100vw / 37.5); /* 375px時に 10px */
  }
}

/* PC: 1366px基準の等比スケール（1024px~、TABとの連続性を保つため10px下限） */
@media (min-width: 1024px) {
  :root {
    font-size: max(10px, calc(100vw / 136.6)); /* 1024-1366pxは10px、以降は等比 */
  }
}

/* --------------------------------------------------------------------------
   2. デザイントークン（CSS custom properties）
   -------------------------------------------------------------------------- */
:root {
  /* --- color --- */
  --c-ink: #333333;    /* 本文・見出し */
  --c-paper: #ffffff;  /* カード背景 */
  --c-accent: #f7e730; /* アクセント黄 */
  --c-line: #989898;   /* 罫線 */
  --c-canvas: #f3f4f6; /* ページ背景 */
  --c-dark: #2a2a2a;   /* 暗色カード */

  /* 派生色（トークン外の直値を増やさないための補助） */
  --c-ink-70: rgba(51, 51, 51, 0.7);
  --c-ink-50: rgba(51, 51, 51, 0.5);
  --c-line-weak: rgba(152, 152, 152, 0.4);
  --c-overlay: rgba(42, 42, 42, 0.55);

  /* --- type scale (rem = 10px基準) --- */
  --fs-xs: 1.2rem;
  --fs-sm: 1.4rem;
  --fs-md: 1.6rem;
  --fs-lg: 2rem;
  --fs-xl: 2.4rem;
  --fs-2xl: 3.2rem;
  --fs-3xl: 4rem;

  --fw-md: 500;
  --fw-bd: 700;

  --lh-tight: 1.4;
  --lh-base: 1.7;
  --lh-loose: 1.9;

  --ls-base: 0.04em;
  --ls-wide: 0.12em;

  /* --- space --- */
  --s-1: 0.8rem;
  --s-2: 1.2rem;
  --s-3: 1.6rem;
  --s-4: 2.4rem;
  --s-5: 3.2rem;
  --s-6: 4rem;
  --s-7: 4.8rem;

  /* --- layout --- */
  --container: 116.6rem;    /* PC コンテンツ最大幅 1166px */
  --gutter-pc: 10rem;       /* PC 左右余白 100px */
  --gutter-sp: 1.6rem;      /* SP 左右余白 16px */
  --gutter-tab: 4rem;       /* TAB 左右余白 40px */
  --section-pad-pc: 10rem;  /* PC セクション上下 100px */
  --section-pad-sp: 7.2rem; /* SP セクション上下 72px */

  /* --- decoration --- */
  --bd: 1px solid var(--c-line);
  --bd-weak: 1px solid var(--c-line-weak);
  --r-pill: 999px; /* 円形のみ。他は角丸0 */
  --shadow-offset: 6px 6px 0;

  /* --- font family --- */
  --ff-base: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", Meiryo, sans-serif;
  --ff-en: "Alata", "Roboto", "Helvetica Neue", Arial, sans-serif;

  /* --- motion --- */
  --dur-fast: 0.16s;
  --dur-base: 0.28s;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- z-index scale --- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-overlay: 290;
}

/* 動きを減らす設定の尊重 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.001s;
    --dur-base: 0.001s;
  }
}