@layer tokens {
  :root {
    /* L1: 正式ロゴから採ったブランド値。用途側で近似色へ置換しない。 */
    --msk-blue-1: #8CCBEC;
    --msk-blue-2: #5AA7DB;
    --msk-blue-3: #3B93CD;
    --msk-blue-4: #2E7FB8;
    --msk-blue-5: #2A76AE;
    --msk-blue-6: #226CA2;
    --msk-blue-7: #123E6B;
    --msk-navy-deep: #0A2440;
    --msk-blue-txt: #12304F;
    --msk-blue-sub: #5A7186;

    /* L1: reference由来の図解用アクセント。ヒーローFIG.01は下記の専用色を使う。 */
    --msk-red: #E8402C;
    --msk-yellow: #F5C22B;
    --msk-ink-blue: #1E52D6;
    --msk-green: #1F9D63;
    --msk-mix: #2A2331;

    /*
     * ── ヒーロー三色（FIG.01 共成のしくみ専用） ────────────────────────
     * reference の色相割り当て（あなた=赤 / だれか=黄 / まち=青）を維持しつつ、
     * 濃紺 #0A2440 上で読める明度に調整したもの。
     * reference の原色をそのまま使うと まち=#1E52D6 が背景に対して2.41:1で沈むため、
     * ロゴの明るい青（#8CCBEC）の系統に寄せている。
     * 「あたらしい何か」はコピー「まだ見たことのない色が生まれる」に対応する光。
     * 加法混色の終点として自然で、濃紺上で最も強く読めるクリームにする。
     * 彩度を調整するときは、この7色だけを変更すれば図解全体へ伝播する。
     */
    --msk-you: #F2705A;       /* あなた：コーラルレッド。濃紺上 5.41:1 */
    --msk-someone: #F0C24A;   /* だれか：ゴールド。濃紺上 9.35:1 */
    --msk-city: #6FC0EC;      /* まち：ロゴ青系のスカイブルー。濃紺上 7.79:1 */
    --msk-mix-ys: #F59A45;    /* あなた∩だれか：オレンジ */
    --msk-mix-sc: #A9D77E;    /* だれか∩まち：ライムグリーン */
    --msk-mix-yc: #BE8AD9;    /* あなた∩まち：ヴァイオレット */
    --msk-mix-all: #FBF2DC;   /* 3重＝あたらしい何か：クリームの光 */
    --msk-venn-edge: rgb(255 255 255 / .34);

    /* L1: 面と線。 */
    --msk-paper: #FAF9F5;
    --msk-white: #fff;
    --msk-ink: #1A1A1A;
    --msk-ink-2: #6A655C;
    --msk-ink-3: #39352F;
    --msk-line: #E4E0D6;
    --msk-line-2: #D6D1C4;

    /*
     * L2: コンポーネントが参照する用途トークン。
     * コンポーネントは var(--fg) などだけを見るため、.is-dark を付けるだけで
     * 一式が反転する。セクション別の上書きを増やさず、詳細度競争を防ぐ。
     */
    --bg: var(--msk-paper);
    --bg-raised: var(--msk-white);
    --fg: var(--msk-ink);
    --fg-muted: var(--msk-ink-2);
    --line: var(--msk-line);
    --line-strong: var(--msk-line-2);
    --rule: var(--msk-ink);
    --link-hover: var(--msk-red);
    /*
     * フォーカスリングは背景で反転させる。紙色上の黄は1.58:1しかなく、
     * WCAG 2.2 の 1.4.11（3:1以上）を満たさないため明背景では濃紺を使う。
     */
    --focus-ring: var(--msk-blue-7);
    --scrim: rgb(250 249 245 / .72);

    --msk-font-jp: "Zen Kaku Gothic New", system-ui, "Hiragino Kaku Gothic ProN", sans-serif;
    --msk-font-mono: "Space Mono", ui-monospace, monospace;
    --msk-font-hero: "MSK Hero", var(--msk-font-jp);
    --msk-maxw: 1160px;
    --maxw: var(--msk-maxw);
    --msk-gutter: 32px;
    --msk-step-h1: clamp(2.2rem, 5vw, 3.8rem);
    --msk-step-h2: clamp(1.5rem, 3vw, 2.1rem);
    --msk-lh: 1.9;
  }

  .is-dark {
    --bg: var(--msk-blue-7);
    --bg-raised: #173F6B;
    --fg: #F7FAFC;
    --fg-muted: #A8C3D8;
    --line: rgb(255 255 255 / .18);
    --line-strong: rgb(255 255 255 / .30);
    --rule: rgb(255 255 255 / .55);
    --link-hover: var(--msk-blue-1);
    --focus-ring: var(--msk-yellow);
    --scrim: rgb(10 36 64 / .70);
  }

  .hero.is-dark,
  .msk-hero.is-dark {
    --bg: var(--msk-navy-deep);
  }
}