/* =============================================================
   ミラツク / esse-sense デザインシステム — デザイントークン正本
   tokens.css  (2026-06-20 初版 / 2026-07-02 v2: dark派生是正 + 欠落軸補完 + プリセット機構)
   ベンチマーク比較（pentagram --f-* / cosmos --color-gray-* OKLCH+color-mix
   / nyt HSLトークン / louvre --preview LQIP）の「全面トークン化」を、赤白CI×ゴシック法×単一アクセント
   に翻訳した単一の真実。各カード/ページの :root ハードコピーをこれに置換する。
   ※ color-mix 非対応環境のため固定値フォールバックを各行に併記。
   ※ 「世界的デザイナーの柔軟さ」= 同一ブランド制約下で版面を出し分ける機構 = 末尾 [data-preset]。
   ============================================================= */
:root{
  /* ---- color : 単一アクセント(濃淡のみ) + 近黒インク + 紙地。多色化しない ---- */
  --accent:#CC1400;
  --accent-deep:#9A0F00;                                   /* fallback */
  --accent-deep:color-mix(in oklch, var(--accent) 85%, black);
  --accent-soft:#FF6A5A;                                   /* fallback */
  --accent-soft:color-mix(in oklch, var(--accent) 70%, white);
  --accent-tint:#F6E1DE;                                   /* fallback */
  --accent-tint:color-mix(in oklch, var(--accent) 12%, white);
  --accent-muted:rgba(204,20,0,.06);

  --ink-strong:#0E0E0E; --ink:#1A1A1A; --ink-soft:#3A3A3A; --ink-mute:#6B6B6B; --ink-faint:#9A9A9A;
  --ink-cite:#595959;   /* 微小注記(10-12px)でも WCAG AA(7:1)を満たす引用/出典インク。--ink-faint は装飾専用(AA未達) */

  --paper:#FFFFFF; --surface:#FAFAFA; --surface-warm:#FAF8F4;   /* warm は薄く。純白を主地に保つ */
  --rule:#E6E6E6; --rule-strong:#1A1A1A;

  /* ---- state : 機能的UIフィードバック専用(successを緑で塗る等)。ブランド配色ではない。
       主役は常に単一アクセント。判定色は近黒×アクセントを基調に彩度を抑える ---- */
  --state-danger:#A01810; --state-warn:#8A5A12; --state-good:#3F6B2E; --state-info:#2A4A6B;
  --state-danger-bg:rgba(160,24,16,.07); --state-warn-bg:rgba(138,90,18,.07);
  --state-good-bg:rgba(63,107,46,.07);   --state-info-bg:rgba(42,74,107,.07);

  /* ---- type : clamp 流体スケール (pentagram --f-heading-* の縮約) ---- */
  --font-sans:"Noto Sans JP","Hiragino Sans",-apple-system,sans-serif;
  --font-mono:"Fira Code","SF Mono",Menlo,monospace;
  --font-logo:"Noto Serif JP",serif;                       /* ロゴ・ワードマーク + 装飾ドロップキャップ限定 */
  --fs-micro:10px;                                         /* 版権・微小メタ */
  --fs-label:12px;
  --fs-caption:13px;                                       /* 図キャプション・注記 (label と body の中間段) */
  --fs-body:clamp(15px,1.05vw,17px);
  --fs-h2:clamp(20px,2vw,28px);
  --fs-h1:clamp(26px,3.4vw,34px);
  --fs-display:clamp(34px,6.4vw,72px);
  --tracking-head:-.02em; --tracking-body:.02em; --tracking-label:.22em;
  --lh-body:1.85; --lh-head:1.22;
  /* 表情は weight で作る(イタリック・明朝の代替)。プリセットが --weight-display を差し替える */
  --weight-body:400; --weight-strong:700; --weight-display:900; --weight-head:700;

  /* ---- measure : ch 可読幅 (cosmos 18-24ch / nyt 600px。日本語は広め 60-68ch) ---- */
  --measure:66ch; --measure-narrow:42ch; --measure-wide:74ch;

  /* ---- space : 8pt スケール ---- */
  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-6:48px; --space-8:80px;
  --gap:clamp(16px,2vw,24px); --side:clamp(28px,6vw,80px);    /* clamp 流体側余白 (louvre/aman 水準・2026-07-02 品格引上げ 56→80) */
  --section-gap:clamp(72px,11vw,148px);                        /* セクション間 余白 (Louvre 贅沢) */

  /* ---- grid / responsive : breakpoint は式に埋め込めないため定数として文書化 + container 用 ---- */
  --cols:12;
  --bp-sm:480px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px; --bp-2xl:1536px;
  --container:min(1200px, 100% - 2*var(--side));
  --density:1;                                             /* comfortable=1 / compact=.72 (プリセットで) */

  /* ---- radius / hairline / depth : 影は禁欲(近黒ヘアラインで構造を作る)。最小2段のみ ---- */
  --radius-sm:2px; --radius:8px;                            /* aman 2px / pentagram の端正さ */
  --hair:1px solid var(--rule);
  --border-w:1px; --border-w-strong:2px;
  --shadow-1:0 1px 2px rgba(14,14,14,.05);                 /* カード極薄。乱用しない */
  --shadow-2:0 8px 32px rgba(14,14,14,.10);                /* モーダル/フロート限定 */
  --z-base:1; --z-sticky:100; --z-overlay:1000; --z-toast:1100;

  /* ---- motion : easing/duration トークン (cosmos canvas-enter と同曲線) ---- */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:.2s; --dur-base:.5s; --dur-slow:.7s;
  --motion-scale:1;                                        /* プリセットが演出強度を束ねる(0=静/1=標準/1.3=強) */

  font-feature-settings:"palt" 1,"kern" 1;
}

/* ---- dark mode は同名変数の上書きのみで全カードに波及。★ accent派生も再計算(v2 是正) ---- */
[data-theme="dark"]{
  --accent:#FF4030;
  --accent-deep:#C42A1E;                                   /* fallback */
  --accent-deep:color-mix(in oklch, var(--accent) 82%, black);
  --accent-soft:#FF8A7E;                                   /* fallback */
  --accent-soft:color-mix(in oklch, var(--accent) 72%, white);
  --accent-tint:#3A1A15;                                   /* fallback: 暗地に馴染む赤茶 */
  --accent-tint:color-mix(in oklch, var(--accent) 20%, #121212);
  --accent-muted:rgba(255,64,48,.12);
  --paper:#121212; --surface:#1A1A1A; --surface-warm:#1C1A18;
  --ink-strong:#FFFFFF; --ink:#E0E0E0; --ink-soft:#C9C9C9; --ink-mute:#9A9A9A; --ink-faint:#6E6E6E; --ink-cite:#B0B0B0;
  --rule:#333333; --rule-strong:#E0E0E0;
  --state-danger:#FF6A5A; --state-warn:#E0B060; --state-good:#7FBE64; --state-info:#78A8D8;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 8px 32px rgba(0,0,0,.6);
}

/* =============================================================
   PRESET THEMES — 世界的デザイナーの柔軟さの本体
   同一ブランド制約(赤白CI / ゴシック法 / 単一アクセント / イタリック禁止)を保ったまま、
   版面・余白律・書体weight・地色の主役・演出強度を「束ねて切替える」。
   使い方: <body data-preset="museum-editorial"> / data-theme と併用可。
   実装物は :root ハードコピーでなく本トークンを参照することで自動的に版面を出し分けられる。
   各値はベンチ実採取(louvre/aman/cosmos/pentagram/nyt)に接地。推測で作らない。
   ============================================================= */

/* 美術館エディトリアル(louvre/aman系): 暖白を主地・大側余白・締まった見出し・演出は静か */
[data-preset="museum-editorial"]{
  --paper:#FAF8F4; --surface:#F3F0EA; --surface-warm:#EFEBE3;
  --side:clamp(32px,7vw,96px); --measure:62ch; --gap:clamp(20px,2.4vw,36px);
  --lh-body:2.0; --tracking-head:-.015em; --weight-display:700; --weight-head:600;
  --radius:6px; --motion-scale:.7;
}
/* 構成主義ボールド(bauhaus/pentagram系): 純白高コントラスト・極太見出し・タイト・演出は俊敏 */
[data-preset="constructivist-bold"]{
  --paper:#FFFFFF; --surface:#F5F5F5; --ink:#0E0E0E;
  --side:clamp(20px,4vw,48px); --measure:70ch; --gap:clamp(12px,1.6vw,20px);
  --tracking-head:-.03em; --weight-display:900; --weight-head:900; --lh-head:1.08;
  --radius:0px; --radius-sm:0px; --ease:var(--ease-out); --motion-scale:1.2;
}
/* スイス機能主義: 中立グレー・角なし・機能的グリッド・演出最小 */
[data-preset="swiss-functional"]{
  --surface:#F5F5F5; --surface-warm:#EEEEEE; --measure:70ch;
  --gap:clamp(12px,1.5vw,20px); --side:clamp(24px,4.5vw,64px);
  --weight-display:700; --weight-head:700; --tracking-head:-.01em;
  --radius:0px; --radius-sm:0px; --motion-scale:.4;
}
/* 暖色エディトリアル(cosmos系): 暖白主地・広い行間・柔らかい移行 */
[data-preset="warm-editorial"]{
  --paper:#FAF8F4; --surface:#F3EFE9; --surface-warm:#EDE7DE;
  --lh-body:1.95; --measure:64ch; --side:clamp(28px,6vw,80px);
  --weight-display:700; --motion-scale:.8;
}
/* ダーク・シネマティック: 暗地主役・大余白・淡い赤・ゆったり演出(data-theme=dark を内包) */
[data-preset="dark-cinematic"]{
  --accent:#FF4030;
  --accent-deep:color-mix(in oklch, var(--accent) 82%, black);
  --accent-soft:color-mix(in oklch, var(--accent) 72%, white);
  --accent-tint:color-mix(in oklch, var(--accent) 20%, #0E0E0E);
  --accent-muted:rgba(255,64,48,.12);
  --paper:#0E0E0E; --surface:#161616; --surface-warm:#181614;
  --ink-strong:#FFFFFF; --ink:#E4E4E4; --ink-soft:#C4C4C4; --ink-mute:#8E8E8E; --ink-faint:#5E5E5E;
  --rule:#2A2A2A; --rule-strong:#E4E4E4;
  --side:clamp(32px,7vw,104px); --measure:60ch; --lh-body:2.0;
  --weight-display:700; --motion-scale:1; --shadow-2:0 12px 48px rgba(0,0,0,.7);
}
/* ANSWER+ 暖色ダーク: esse-sense・ANSWER+ 名義アプリの操作画面の既定面（2026-09-12 西村さん決裁）。
   data-theme=dark を内包。値の出どころは ANSWER+ 本体 design-tokens.css の暖色ブロック（491行〜）と
   v3 暗面アクセント #FF5A47。★紙面（印刷・PDF・レポート本文）には使わない。
   ★文字を置いてよい面は --paper〜--surface-2 まで。--surface-3/-4・--ink-faint 以下は非文字のみ。
   ★アプリ側の写しは verify-preset-copy.mjs で照合する（写しを正にしない）。 */
[data-preset="answer-warm-dark"]{
  --paper:#0E0D0C; --surface:#171513; --surface-warm:#1F1C19;
  --surface-2:#272320; --surface-3:#2F2B27; --surface-4:#37322D;
  --ink-strong:#F2EFE9; --ink:#F2EFE9; --ink-soft:#CBC6BD; --ink-mute:#9A948A;
  --ink-faint:#736E66; --ink-4:#524D46; --ink-5:#3A3633;
  --rule:#2A2724; --rule-2:#3A3633; --rule-strong:#F2EFE9;
  --ui-border:#807870; --ui-border-hover:#9A948A;
  --accent:#FF5A47; --accent-fill:#CC1400; --accent-fill-hover:#9A0F00; --on-accent:#FFFFFF;
  --accent-muted:rgba(204,20,0,.12); --accent-fog:#2A1512;
  --state-danger:#FF5A47; --state-danger-bg:#2A1512;
  --state-warn:#E0B040;   --state-warn-bg:#2E2818;
  --state-good:#4CAF82;   --state-good-bg:#1F2E27;
  --state-info:#B8B8B4;   --state-info-bg:#2A2A2A;
  --focus-ring:0 0 0 3px #FF5A47; --scrim:rgba(14,13,12,.72);
  /* 真鍮（2026-09-27 西村さん決裁で登録）。副次の装飾色。
     ★用途は esse-sense Future Forum の参加者面・アーカイブ面に限る。他の ANSWER+ 名義アプリでは使わない。
     ★アクセントではない。状態・操作の誘導・強調の意味を持たせない（強調は太字＋--accent のまま）。
     ★文字に使えるのは --brass / --brass-soft で、面は --surface-2 まで（5.04:1 / 7.17:1）。
     ★--brass-deep は --paper 上でも 4.01:1＝文字にも、意味を持つ印にも使わない（装飾の罫のみ）。
     ★--brass-muted は小さな受け地（チップ・注記帯）に限る。その上の文字は --brass-soft。 */
  --brass:#B08D57; --brass-soft:#C9AC79; --brass-deep:#8A6D3E; --brass-muted:rgba(176,141,87,.1);
}
/* ANSWER+ レポートの明面（2026-10-07 西村さん決裁で登録）。
   値の出典: ANSWER+ フルレポート v3（~/.claude/playbooks/answer-plus-full-report-format.md）。
   中立灰の既定より罫と従属インクを暖色に寄せる。台帳・文献リストなど ANSWER+ 版面の画面版に使う。
   ★~= で書くので compact と併用できる（例 data-preset="answer-report-light compact"）。
   ★コントラスト: --ink-mute #767068 は白地 4.90:1・--surface-warm #FAF8F4 上 4.62:1（本文の AA を満たす）。
   ★--panel-ink / --panel-ink-mute は暗い帯（By the Numbers 等）の上の文字専用。明面の地には使わない。 */
[data-preset~="answer-report-light"]{
  --rule:#E4E0D8; --rule-2:#EEEAE2; --ink-mute:#767068; --ui-border:#767068;
  --panel-ink:#F4F1EC; --panel-ink-mute:#9C958B;
}
/* 密度: 情報密度の高い管理画面/ダッシュボード向け(comfortable→compact) */
[data-preset~="compact"]{
  --density:.72; --gap:clamp(8px,1vw,14px); --space-4:16px; --space-6:32px;
  --lh-body:1.7; --fs-body:clamp(13px,.9vw,15px);
}
/* ミラツク法人CI(earth): 12色アースカラー・基調#783C28・暖白主地・大側余白・静かな演出。
   会員制サイト futures 等の法人ブランド面に使う(museum-editorial×12色)。
   ★ プロダクト面の赤白CI(#CC1400)とは別系統。混同禁止(design-quality-canon D3/必須gate)。
   12色多色は渦ロゴと限定タグに封じ、UI主役面は基調ブラウン濃淡のみで静謐に保つ。 */
[data-preset="miratuku-earth"]{
  --accent:#783C28;
  --accent-deep:#5E2E1E;                                   /* fallback */
  --accent-deep:color-mix(in oklch, var(--accent) 85%, black);
  --accent-soft:#A56B54;                                   /* fallback */
  --accent-soft:color-mix(in oklch, var(--accent) 70%, white);
  --accent-tint:#EFE2DB;                                   /* fallback */
  --accent-tint:color-mix(in oklch, var(--accent) 12%, white);
  --accent-muted:rgba(120,60,40,.07);
  --paper:#FAF8F5; --surface:#F3EFE9; --surface-warm:#EFE7DE;
  --ink-strong:#1A1A1A; --ink:#2A211C; --ink-soft:#4A3C34; --ink-mute:#8A7868; --ink-faint:#B0A294;
  --ink-cite:#5B4A3F;
  --rule:#E4DCD2; --rule-strong:#2A211C;
  --side:clamp(32px,7vw,96px); --measure:64ch; --lh-body:2.0;
  --weight-display:700; --weight-head:600; --tracking-head:-.015em; --motion-scale:.7;
  /* nature wave (additive / 2026-07-10): 生命的着地イージング + 微モーション時間 (hover spring / microdelight)。earth の静謐を壊さない緩慢。MID-DB イージング概念に接地。 */
  --ease-decelerate:cubic-bezier(.05,.7,.1,1); --ease-out-soft:cubic-bezier(0,0,.58,1);
  --dur-micro:.14s; --dur-breathe:2.4s;
  /* 会員シェル/トップ用の伸びしろ (additive / 2026-07-09): 角丸は基調2px(写真8px)・見出し負字間・限定タグseed */
  --radius:2px; --radius-media:8px; --radius-full:9999px;
  --tracking-display:-.03em; --measure-narrow:52ch;
  --seed-terracotta:#DC8766; --seed-sand:#F0BE83; --seed-camel:#CEA26F; --seed-deep:#7A4033;
  /* W1 書体基盤刷新 (C案 / 2026-07-10 additive) — 会員面(futures)は next/font で
     Zen Kaku Gothic Antique(和文) / Hanken Grotesk(欧文) / Zen Old Mincho(明朝限定) を
     ロードし --font-*-loaded として供給。canon: ゴシック法/イタリック禁止/明朝は
     ワードマーク・dropcap・pull quote 限定/単一アクセント #783C28。 */
  --font-jp:var(--font-jp-loaded), "Hiragino Sans", -apple-system, sans-serif;
  --font-en:var(--font-en-loaded), var(--font-jp);
  --font-serif:var(--font-serif-loaded), "Hiragino Mincho ProN", serif;
  --font-sans:var(--font-jp); --font-display:var(--font-jp); --font-logo:var(--font-serif);
  --font-mono:"Fira Code", "SF Mono", monospace;
  /* 型スケール (Toteme 級落差・clamp 流体) */
  --fs-eyebrow:clamp(10px,.9vw,11px); --fs-body:clamp(14.5px,1.1vw,15.5px);
  --fs-lead:clamp(16px,1.5vw,19px); --fs-h3:clamp(20px,2.2vw,26px);
  --fs-h2:clamp(26px,3.4vw,38px); --fs-h1:clamp(34px,5.2vw,60px);
  --fs-display:clamp(40px,7vw,84px);
  /* 字間: 見出しほど強い負字間 */
  --tracking-h1:-.025em; --tracking-h2:-.02em; --tracking-h3:-.015em;
  --tracking-body:.01em; --tracking-eyebrow:.24em;
  /* 行間: CJK 広め・見出し締め */
  --lh-display:1.08; --lh-head:1.28; --lh-lead:1.8;
}
[data-preset="miratuku-earth"],
[data-preset="miratuku-earth"] :where(h1,h2,h3,h4,h5,h6,p,span,a,button,input,textarea,select,li,label,dt,dd,blockquote,figcaption,small,strong,em,td,th){font-family:var(--font-jp);}
[data-preset="miratuku-earth"] ::selection{background:rgba(120,60,40,.14);}   /* 赤選択を暖ブラウンへ */

/* ---- base utilities (任意採用。トークン参照で版面出し分けが自動反映される) ---- */
.prose{max-width:var(--measure);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--tracking-body);}
.prose--narrow{max-width:var(--measure-narrow);}
.section{padding:clamp(48px,7vw,84px) var(--side);}
.section--warm{background:var(--surface-warm);border-block:var(--hair);}
.container{max-width:var(--container);margin-inline:auto;}
.display{font-size:var(--fs-display);font-weight:var(--weight-display);letter-spacing:var(--tracking-head);line-height:var(--lh-head);}
.h1{font-size:var(--fs-h1);font-weight:var(--weight-head);letter-spacing:var(--tracking-head);line-height:var(--lh-head);}
.label{font-size:var(--fs-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-mute);}
.caption{font-size:var(--fs-caption);color:var(--ink-mute);line-height:1.6;}
.media{background:var(--lqip,#e8e6e4);}                     /* LQIP: ETLで平均色を --lqip に注入 */
.media img{opacity:0;transition:opacity var(--dur-slow) var(--ease);}
.media img.loaded{opacity:1;}
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
::selection{background:rgba(204,20,0,.14);}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;}}