/* ============================================================
   JabaracDesign — Design Tokens
   2層構成： Primitive（生値） → Semantic（意図）
   - Primitive は直接参照しない。Semantic 経由で使う。
   - 署名色は --brand（テーマ可能）。固定の臙脂ではなく、
     アプリごとに --brand-base を差し替えて色を定義する。
   - Night は Semantic 層だけを上書きする（Primitive は不変）。
   ============================================================ */

:root {
  /* ===== Primitive — Color（生のパレット） ===== */
  --c-greige:        #F4F3F1;  /* 帳面の地 */
  --c-greige-line:   #D8D6D1;
  --c-paper:         #FAF9F7;  /* プロダクトの地 */
  --c-surface:       #FFFFFF;  /* 面 */
  --c-line:          #E7E5E1;
  --c-ink:           #2A2925;  /* 文字（黒に灰を一滴） */
  --c-ash:           #8A877F;  /* 補助文字 */

  --c-enji:          #9B3A3A;  /* 既定の署名色（House ブランド） */
  --c-taupe:         #5E5650;  /* 主動作：地に沈むトープ */

  /* プロダクト・アクセント（彩度を落とした分類色） */
  --c-sand:          #B8A98C;
  --c-sage:          #8E9C8E;
  --c-rose:          #B58E84;
  --c-slate:         #84909C;

  --c-moss:          #5E7D5A;  /* success */
  --c-ember:         #A8554A;  /* error */

  /* ===== Primitive — Typography ===== */
  --font-serif: "Shippori Mincho", "Hiragino Mincho ProN", serif;   /* 記憶・蓄積の層 */
  --font-sans:  "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif; /* 操作・現在の層 */
  --font-mono:  ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* 型階層（上に大きく下に密。等比ラダーを避け、重みで不均等に刻む）
     記憶・蓄積の層＝明朝：display / headline / title / data
     操作・現在の層＝角ゴ：subhead / body / supporting / caption / label */
  --text-display:  32px;   /* 章扉・最大標題 */
  --text-headline: 26px;   /* ヘッドライン */
  --text-title:    22px;   /* タイトル・小見出し */
  --text-subhead:  17px;   /* サブヘッドライン・リード */
  --text-body:     15px;   /* 本文 */
  --text-data:     32px;   /* 数値（tnum） */
  --text-sm:       13px;   /* サポーティングテキスト */
  --text-xs:       11.5px; /* キャプション・ラベル */

  /* 行間（役割で変える。見出しは詰め、本文は和文向けに広く取る） */
  --leading-head: 1.5;
  --leading-snug: 1.75;
  --leading-body: 1.9;

  /* ===== Primitive — Space（等差で割らず、重みで配る目安） ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 56px;

  /* ===== Primitive — Radius（角丸はプロダクト面の署名） ===== */
  --radius-control: 10px;  /* 入力・チップ */
  --radius-card:    12px;  /* カード・リスト */
  --radius-surface: 16px;  /* シート・ダイアログ */
  --radius-pill:    999px;

  /* ===== Primitive — Tap target ===== */
  --tap-min:  42px;
  --tap-main: 48px;

  /* ===== Primitive — Motion ===== */
  --ease:        cubic-bezier(.22, .61, .36, 1);
  --dur-fast:    .25s;
  --dur-mid:     .35s;
  --dur-slow:    .4s;

  /* ===== Primitive — Elevation（影は「物理的に浮く要素」のみ） ===== */
  --shadow-pop:  0 3px 10px rgba(0,0,0,.16);
  --shadow-float:0 4px 16px rgba(0,0,0,.18);

  /* ============================================================
     Semantic（意図）— ここから下をコンポーネントが参照する
     ============================================================ */

  /* 地・面・文字 */
  --page:       var(--c-greige);      /* カタログ／アプリ最背面 */
  --page-line:  var(--c-greige-line);
  --paper:      var(--c-paper);       /* プロダクト背面 */
  --surface:    var(--c-surface);     /* 面（カード等） */
  --line:       var(--c-line);        /* 罫 */
  --ink:        var(--c-ink);         /* 本文 */
  --ash:        var(--c-ash);         /* 補助文字 */

  /* 署名色（ブランド）— テーマ可能。既定は臙脂。
     アプリは --brand-base を差し替えるだけでよい（themes.css 参照）。 */
  --brand-base: var(--c-enji);
  --brand:      var(--brand-base);
  --brand-soft: color-mix(in srgb, var(--brand-base) 62%, #fff);
  --on-brand:   #FFFFFF;              /* brand 塗りの上の文字 */

  /* 主動作（CTA）— 署名色とは別。地に沈むトープ */
  --cta:        var(--c-taupe);
  --on-cta:     #FFFFFF;

  /* プロダクト・アクセント（分類色。既定は Sand） */
  --accent:     var(--c-sand);

  /* 状態色 */
  --ok:         var(--c-moss);
  --err:        var(--c-ember);
}

/* ============================================================
   Night — Semantic 層のみ上書き（深夜・低輝度で眩しくない）
   ============================================================ */
:root[data-theme="night"] {
  --page:       #161513;
  --page-line:  #363430;
  --paper:      #1C1B18;
  --surface:    #252320;
  --line:       #363430;
  --ink:        #ECEAE4;
  --ash:        #A4A097;

  /* 署名色は base を明るい側へ寄せて夜に馴染ませる（アプリ色でも自動で効く） */
  --brand:      color-mix(in srgb, var(--brand-base) 70%, #E8D7D2);
  --brand-soft: color-mix(in srgb, var(--brand-base) 55%, #E8D7D2);
  --on-brand:   #161513;

  --cta:        #8A817A;
  --on-cta:     #161513;

  --accent:     color-mix(in srgb, var(--accent) 86%, #fff);

  --ok:         #7E9A83;
  --err:        #B06A5F;
}