/* ==========================================================================
   tokens.css — デザイントークンの単一定義元
   --------------------------------------------------------------------------
   CLAUDE.md 5章「値はコード内に散らさず、必ず一箇所にまとめて定義する」に対応。
   ブランド色・フォント・ブレイクポイントはこのファイルだけで定義し、
   ページ固有のCSSからは必ず var() 経由で参照する。

   読み込み順: tokens.css → base.css → ページ固有CSS
   ========================================================================== */

:root {
  /* --- ブランドカラー -----------------------------------------------------
     ロゴSVG（rashisa-logo-20260713.svg）の実測値は
     橙 #e28320 / 緑 #67ab33 / 青 #1278b6 / 墨 #2a2b2b。
     下記は現行サイトが使用している値で、ロゴとは微差がある。
     アクセント1色への集約はデザイン確定後に対応する（CLAUDE.md 1章）。
     ----------------------------------------------------------------------- */
  --brand-green: #70b62c;
  --brand-orange: #f49a17;
  --brand-blue: #1489d5;

  /* --- 書体 ---------------------------------------------------------------
     和文は Noto Sans JP に統一。欧文は用途で2系統。
     ----------------------------------------------------------------------- */
  --font-ja: "Noto Sans JP", sans-serif;
  --font-en: "Inter", sans-serif;
  --font-en-lp: "DM Sans", sans-serif;

  /* --- モーション（CLAUDE.md 5章） --------------------------------------- */
  --duration-hover: .25s;
  --duration-reveal: .7s;
}

/* --- ブレイクポイント ------------------------------------------------------
   カスタムプロパティは @media で使えないため、値をここに集約して記載する。
   各CSSの @media はこの表の値だけを使う。

     lg  1023px
     md   767px  … 基本
     sm   600px

   NOTE: 現行の corporate.css / product-lp.css は 900px / 620px で分岐しており、
   上記の規定値と一致していない。切り替え幅を変えるとレイアウトの折り返し位置が
   変わるため、デザイン確定時にまとめて揃える。
   -------------------------------------------------------------------------- */