/* ==========================================================================
   AQUA GIFT design tokens  —  v0.2.0 (2026-08-23)

   値の正本: DESIGN-SYSTEM.md v1.2 §8-2（トークン一覧）
   本ファイルは「値に名前を付けて配る」だけを行う。**どの要素にも適用しない。**
   セレクタは :root と、スマホ帯で値だけ差し替える :root の2つしか存在しない。
   したがって、このファイルを読み込んでも見た目は 1px も変わらない。

   規則（§8-1・交渉不可）:
     - 新名前空間 --ag-* のみ。既存の --accent / --ink / --muted / --max / --pad は
       絶対に再定義しない（1コミットで全ページの色と幅が動くため）。
     - 参照する側は必ず2引数で書く: var(--ag-accent, #0B5277)
     - このファイルに !important を書かない。
     - 値は px で書く（SWELL系 root が 3.6vw のため rem は端末幅で割れる）。

   ここに入れていないもの（意図的）:
     - §9-5 暫定登録簿の先行トークン（--ag-bg / --ag-surface-2 / --ag-border-strong /
       --ag-accent-soft / --ag-focus）… 暫定であり確定ではない
     - ボタン寸法・角丸・影（--ag-btn-h / --ag-btn-w-min / --ag-r-* / --ag-shadow*）
       … 承認範囲が「色・幅・余白・文字の確定分」のため次回
     （LP幅は 2026-08-23 に裁定され --ag-w-lp として下に登録済み）
     - ブレークポイント … CSSカスタムプロパティは @media の条件式で使えない。
       599 / 1100 は各CSSに数値で直接書く（出どころは DESIGN-SYSTEM.md §6-3 だけ）
   ========================================================================== */

:root {

  /* --- 色: 9役割 + 濃紺面（§2-1 / §2-4 / §8-2） ------------------------- */
  --ag-ink: #0A1A2B;              /* 主文字・濃紺の面・価格 */
  --ag-ink-2: #2A3A4C;            /* 副文字・ナビ既定・入荷速報の日付 */
  --ag-muted: #5B6B7D;            /* 補助文字（白背景のみ。濃紺面で使わない） */
  --ag-accent: #0B5277;           /* ブランド青。白・淡色の面だけ */
  --ag-accent-2: #093E5B;         /* hover（§5-5） */
  --ag-surface: #F5F7F9;          /* 面 */
  --ag-border: #E4E9EE;           /* 罫線 */
  --ag-rakuten: #BF0000;          /* 楽天識別色。他所で使わない（§7-1） */
  --ag-yahoo: #FF0033;            /* Yahoo!識別色。他所で使わない（§7-1） */

  /* 濃紺面（§11-2・裁定済み 2026-08-23） */
  --ag-on-dark: #D5DDE5;          /* 濃紺面の本文（対濃紺 12.80:1） */
  --ag-accent-on-dark: #71C9E1;   /* 濃紺面のアクセント（9.32:1）。白地に置かない */

  /* 在庫3値（§2-4・裁定済み 2026-08-23。売切れに赤を使わない） */
  --ag-stock-in-bg: #FFFFFF;
  --ag-stock-in-fg: #1E7A3C;      /* 同色1px枠。5.38:1 */
  --ag-stock-low-bg: #F89B11;     /* 面で塗ってよい唯一の状態 */
  --ag-stock-low-fg: #0A1A2B;     /* 8.10:1 */
  --ag-stock-out-bg: #E4E9EE;
  --ag-stock-out-fg: #0A1A2B;     /* 14.38:1 */

  /* --- 文字（§3-1 / §3-4 / §3-5 / §8-2） -------------------------------- */
  /* 6段階。スマホ値は -sp で必ずペアで持つ（§3-1） */
  --ag-fs-h1: 40px;    --ag-fs-h1-sp: 28px;
  --ag-fs-h2: 28px;    --ag-fs-h2-sp: 22px;
  --ag-fs-h3: 20px;    --ag-fs-h3-sp: 18px;
  --ag-fs-body: 16px;  --ag-fs-body-sp: 16px;   /* 本文は下げない */
  --ag-fs-sm: 14px;    --ag-fs-sm-sp: 14px;     /* 価格・購入ボタン・在庫 */
  --ag-fs-xs: 12px;    --ag-fs-xs-sp: 12px;     /* 下限 */

  /* 読み物プリセット --ag-scale-doc（§3-4。値は説明書の実測） */
  --ag-fs-doc-body: 17px;
  --ag-lh-doc-body: 1.88;
  --ag-fs-doc-h3: 18.4px;

  /* 行間 */
  --ag-lh-body: 1.8;
  --ag-lh-head: 1.4;

  /* 和文と欧文の別トラッキング（§3-5）。和文は 0 なのでトークンを持たない */
  --ag-ls-en: .09em;              /* 欧文の見出し・ラベル・数値 */
  --ag-ls-eyebrow: .18em;         /* 英字アイブロウ（大文字・小サイズ） */
  --ag-ls-head-serif: .04em;      /* 明朝の「声」 */

  /* 書体（§3-3）。Noto Sans JP は新規で指定しない */
  --ag-ff-head: 'Shippori Mincho', 'Noto Serif JP', serif;
  --ag-ff-body: 'Zen Kaku Gothic New', system-ui, -apple-system, sans-serif;
  --ag-ff-en: 'Manrope', 'Inter', system-ui, sans-serif;

  /* --- 余白（§4-1 / §4-3） ---------------------------------------------- */
  --ag-sp-1: 8px;                 /* アイコンと文字の間・バッジ内 */
  --ag-sp-2: 16px;                /* 段落間・カード内padding・商品グリッドの gap */
  --ag-sp-3: 24px;                /* 見出しと本文の間・ブロック間 */
  --ag-sp-4: 48px;                /* 見出しの上・小ブロックの区切り */
  --ag-sec-sm: 64px;              /* 小さいセクション間（スマホ値は下の @media） */
  --ag-sec: 96px;                 /* セクション間・標準（スマホ値は下の @media） */
  --ag-gutter-sp: 18px;           /* スマホ左右余白（§4-3・審査 裁定1） */

  /* --- 幅（§6-2）。揃える対象は max-width ではなく content box ---------- */
  --ag-w-shop: 1040px;            /* 売り場の content box（入荷速報記事を含む） */
  --ag-w-read: 760px;             /* 読み物本文の content box */
  --ag-w-fig: 1040px;             /* 読み物内の図・表の上限 */
  --ag-w-lp: 1240px;              /* LP（工房型・商品LP）の content box。§9-2-B の LP幅は
                                     2026-08-23 に「1240px へ統合」で裁定済み（経営判断codex_LP幅裁定_2026-08-23.md）。
                                     lp.css / product-lp.css は §6-1 の公式で参照する:
                                       max-width: calc(var(--ag-w-lp, 1240px) + pad * 2) */
  --ag-w-header: 1320px;          /* ヘッダーの max-width。**参照のみ・触らない**
                                     （content は 1224px）。ヘッダーCSSの --max /
                                     --pad には一切適用しないこと（§6-2・憲章10条） */
  --ag-pad: 48px;                 /* PC左右padding。実勢3段 48 / 24 / 18 の標準値 */

  /* コンテナの書き方は §6-1 の公式をコピーして使う:
       max-width: calc(var(--ag-w-shop, 1040px) + var(--ag-pad, 48px) * 2);
       padding-inline: var(--ag-pad, 48px);
       margin-inline: auto;
     max-width に content 値を直書きするのは憲章1条違反。 */

  /* 生存確認用（§8-4 着手前ゲート1）。残しておくと配信の生死を1行で測れる */
  --ag-probe: 1px;
}

/* スマホ帯（§6-3: ≤599px）でだけ値が変わるトークン。
   §4-1 の「セクション間はスマホで縮める」を、名前を増やさずに表現している。
   600–1099px の帯は PC 値を継承する（この帯だけの値を新設しない・審査 裁定2）。
   599 は数値で直接書くしかない（カスタムプロパティは @media の条件式で使えない）。 */
@media (max-width: 599px) {
  :root {
    --ag-sec-sm: 40px;
    --ag-sec: 64px;
  }
}