/*
 * YURAI LP ／ デザイントークン
 *
 * 出典：DecisionOps-Demo `static/yurai/yurai.css` のトークン層と
 *       YURAI-LP-standalone-light（既存LP）のデザイントークン。
 *       ブランド赤は #c8102e（docs/BRAND.md §4）。
 *
 * ここには「値」だけを置く。レイアウトは base.css / sections.css。
 */

/* ─────────────────────────────────────────────────────────────
   [hidden] を必ず効かせる。
   作者スタイルの display 指定（例 .yu-row{display:flex}）は
   UA の [hidden]{display:none} より優先されるため、これが無いと
   <div class="yu-row" hidden> が表示されたままになる。
   JS で .hidden を見る検査は true を返すので、目視でしか気付けない。
   （過去に実際に踏んだ失敗。docs/BRAND.md §8）
   ───────────────────────────────────────────────────────────── */
[hidden] { display: none !important; }

:root {
  /* 固定ヘッダーの実測高さ。アンカー移動の逃げ幅に使う */
  --yu-head-h: 64px;
  /* ── ブランド色 ── */
  --yu-navy: #16305c;
  --yu-navy-d: #12203a;
  --yu-navy-dd: #0d1829;
  --yu-red: #c8102e;
  --yu-red-h: #a80d26;      /* 明るい面での hover */
  --yu-red-l: #ff5a70;      /* 濃紺の上ではこちら */

  /* ── 面 ── */
  --yu-bg: #f7f8f9;
  --yu-white: #ffffff;
  --yu-s1: #eef1f6;
  --yu-s2: #f4f6fa;
  --yu-s3: #fbfcfd;
  --yu-tint: #f4f7fd;       /* 選択状態の淡い青 */
  --yu-tint-red: #fdf4f5;   /* 注意の淡い赤 */

  /* ── 文字 ── */
  --yu-ink: #1b2430;
  --yu-ink2: #41506a;
  --yu-ink3: #48566d;
  --yu-mut: #626d7c;        /* WCAG AA: 明るい面すべてで 4.5:1 以上 */
  --yu-mut2: #8a95a6;
  --yu-on-navy: #dbe3f0;
  --yu-on-navy-mut: #9aabc6; /* WCAG AA: 濃紺面で 4.5:1 以上 */

  /* ── 状態 ── */
  --yu-ok: #3f8f6b;
  --yu-warn: #c9a227;
  --yu-warn-d: #8a6a2f;

  /* ── 線・影 ── */
  --yu-line: rgba(22, 48, 92, .14);
  --yu-line-s: rgba(22, 48, 92, .09);
  --yu-line-on-navy: rgba(255, 255, 255, .14);
  --yu-shadow: 0 24px 60px -30px rgba(18, 32, 58, .45);
  --yu-shadow-s: 0 10px 26px -18px rgba(18, 32, 58, .38);

  /* ── 書体 ── */
  --yu-gothic: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --yu-serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif;

  /* ── 間隔・角丸 ── */
  --yu-wrap: 1180px;
  --yu-pad: clamp(20px, 5vw, 40px);
  --yu-sec-pad: clamp(64px, 8vw, 104px);
  --yu-r-s: 8px;
  --yu-r: 12px;
  --yu-r-l: 16px;
  --yu-pill: 999px;

  /* ── 演出の時間（値であって業務条件ではない） ── */
  --yu-t: .5s;
  --yu-ease: cubic-bezier(.2, .7, .3, 1);
}