/* ================================================================
   WEB TOKENS v3.0 — bx2o Design System
   決定日: 2026-06-12
   分離方針: Web専用レイヤー。PPTX非互換OK。
   旧 tokens.css（v2.0 統合版）は既存サイト向けに別途維持。
   新規サイト・refresh済みサイトはこちらを参照。
   正本: design-system/web-tokens.css
   ================================================================

   Brand DNA（全媒体共有）
   - 色相: 藍10段 + 機能色4 + 棚色6
   - 声: スイス/グリッド・左揃え・サンセリフ・抑制
   - Evidence原則: 確度明示・出典必須・取れないものは載せない
   ================================================================ */

:root {

  /* ── 1. NEUTRAL SCALE ─────────────────────────────────────── */
  --n-0:   #ffffff;
  --n-50:  #fafafa;
  --n-100: #f5f5f5;
  --n-200: #e8e9eb;
  --n-300: #d8d9db;
  --n-400: #b0b0b4;
  --n-500: #6b6b70;
  --n-700: #3a3a3e;
  --n-900: #1a1a1e;
  --n-950: #0f0f10;

  /* ── 2. SURFACE ───────────────────────────────────────────── */
  --surface-base: var(--n-0);     /* ページ背景 */
  --surface-1:    var(--n-100);   /* カード・パネル・サイドバー */
  --surface-2:    var(--n-200);   /* 選択行・タグ背景・フッター */
  --surface-3:    var(--n-300);   /* アクティブ・押下状態 */

  /* ── 3. TEXT ──────────────────────────────────────────────── */
  --text-primary:   var(--n-950);
  --text-secondary: var(--n-700);
  --text-tertiary:  var(--n-500);
  --text-disabled:  var(--n-400);
  --text-inverted:  var(--n-0);

  /* ── 4. BORDER ────────────────────────────────────────────── */
  --border:       0.5px solid var(--n-200);
  --border-strong: 0.5px solid var(--n-300);

  /* ── 5. 藍 SCALE (Brand DNA・アクション既定) ─────────────── */
  --blue-900: #213a6e;
  --blue-800: #2b4d8e;
  --blue-700: #3560aa;
  --blue-600: #4072c0;
  --blue-500: #5086d4;
  --blue-400: #689ee0;
  --blue-300: #82b8ea;
  --blue-200: #aed0f4;
  --blue-100: #d0e5fa;
  --blue-50:  #eff4fd;

  /* ── 5b. SHELF HUE SCALES（OKLCH一括生成・2026-06-12確定）──
     藍10段と同一の明度/彩度カーブ（鼠藍のみ彩度42%）。
     生成器: design-system/generate_shelf_oklch.py
     全700段 白地コントラスト 5.8:1 以上 / 機能色と色相30°以上分離 */

  /* 青碧 — anatomy棚（H=192） */
  --teal-900: #004745; --teal-800: #005c5a; --teal-700: #00716f;
  --teal-600: #008482; --teal-500: #009a96; --teal-400: #1db1ad;
  --teal-300: #64c5c1; --teal-200: #9ddad6; --teal-100: #c8eae8;
  --teal-50:  #eaf7f6;

  /* 苔 — language棚（H=125・旧深緑はok常磐と衝突のため移動） */
  --moss-900: #324400; --moss-800: #425900; --moss-700: #526e00;
  --moss-600: #618012; --moss-500: #74932e; --moss-400: #8ba755;
  --moss-300: #a5bd7c; --moss-200: #c3d4a8; --moss-100: #dce7cd;
  --moss-50:  #f2f5ec;

  /* 江戸紫 — visual棚（H=302） */
  --purple-900: #462e66; --purple-800: #5c3e84; --purple-700: #704e9e;
  --purple-600: #825eb4; --purple-500: #9571c8; --purple-400: #a88ad6;
  --purple-300: #bda5e4; --purple-200: #d3c3ef; --purple-100: #e6ddf7;
  --purple-50:  #f5f2fb;

  /* 蘇芳 — observation棚（H=356・旧琥珀はwarn砂と衝突のため移動） */
  --rose-900: #61233e; --rose-800: #7e3052; --rose-700: #983e64;
  --rose-600: #ae4d76; --rose-500: #c26188; --rose-400: #d27c9d;
  --rose-300: #e29ab4; --rose-200: #efbccd; --rose-100: #f8d9e3;
  --rose-50:  #fcf0f4;

  /* 鼠藍 — tools棚（H=248・彩度42%＝藍との区別は彩度で取る） */
  --slate-900: #2c3f51; --slate-800: #3b5269; --slate-700: #4a6580;
  --slate-600: #597693; --slate-500: #6c89a6; --slate-400: #849eb8;
  --slate-300: #a0b5ca; --slate-200: #bfcedd; --slate-100: #dbe3ec;
  --slate-50:  #f1f4f7;

  /* ── 6. FUNCTIONAL COLORS ─────────────────────────────────── */

  /* 緋 Danger: UI要素(3:1), 本文は-text(-dark)使用 */
  --danger:      #e0402f;   /* 4.2:1 — ボタン・バッジ・アイコン */
  --danger-dark: #b83020;   /* 5.8:1 — 本文・ラベルテキスト */
  --danger-bg:   #fff0ee;

  /* 常磐 OK */
  --ok:      #1d7a55;   /* 5.1:1 */
  --ok-bg:   #f0fdf4;

  /* 砂 Warn */
  --warn:      #b07d2a;   /* 4.6:1 */
  --warn-bg:   #fffbeb;

  /* ── 7. SEMANTIC / INTERACTIVE ────────────────────────────── */
  /* デフォルト = 藍。shelf-* クラスで上書き */
  --color-action:         var(--blue-700);
  --color-action-hover:   var(--blue-800);
  --color-action-pressed: var(--blue-900);
  --color-action-ghost:   var(--blue-600);   /* アウトライン・ghost border */
  --color-tint:           var(--blue-50);    /* 選択行・chip・info帯 */
  --color-tint-hover:     var(--blue-100);   /* tint上のhover */

  /* ── 8. ORIGIN COLORS（v2.0継承・Web/PPTXで共有）─────────── */
  /* 主体・出自の分類専用。CTA/Danger/装飾には使わない */
  --origin-human:        #7d4009;
  --origin-human-bg:     #fef9f6;
  --origin-human-border: #f5e2d6;

  --origin-ai:           #763671;
  --origin-ai-bg:        #fdf8fc;
  --origin-ai-border:    #f2dff0;

  --origin-cocreate:     #007d78;
  --origin-cocreate-bg:  #f6fbfb;

  --origin-system:       #5f85ad;
  --origin-system-bg:    #f8fafd;

  --origin-archive:      #415b30;
  --origin-archive-bg:   #f9fbf8;

  /* ── 9. DATA VIZ PALETTE（8色カテゴリカル・棚色と対応）───── */
  /* 順序データ: blue-900→blue-50。対立データ: blue↔amber */
  /* dv-1〜6 = 棚色700段。dv-7/8 = 棚から降格した琥珀/深緑（チャート専用で生存） */
  --dv-1: var(--blue-700);    /* 藍（母艦） */
  --dv-2: var(--teal-700);    /* 青碧（解剖系） */
  --dv-3: var(--moss-700);    /* 苔（言葉系） */
  --dv-4: var(--purple-700);  /* 江戸紫（視覚系） */
  --dv-5: var(--rose-700);    /* 蘇芳（観測系） */
  --dv-6: var(--slate-700);   /* 鼠藍（道具系） */
  --dv-7: #b45309;            /* 琥珀（チャート専用・UIには使わない） */
  --dv-8: #2e6b48;            /* 深緑（チャート専用・UIには使わない） */
  --dv-neutral: var(--n-400); /* 補助系列・背景系列 */
  --dv-anomaly: var(--danger); /* 異常値 */

  /* ── 10. TYPOGRAPHY ────────────────────────────────────────── */
  --font-body:    "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-display: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-data:    "Inter", "Noto Sans JP", sans-serif;

  /* スケール（和文は欧文より+1〜2px） */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;   /* 本文最小ライン */
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  72px;

  /* 行高 */
  --leading-body:    1.8;   /* 和文本文必須 */
  --leading-heading: 1.3;
  --leading-data:    1.5;   /* テーブル・リスト */
  --leading-display: 1.0;   /* 72px+ の表示専用 */

  /* 字間 */
  --tracking-body:    0.04em;
  --tracking-heading: -0.02em;
  --tracking-data:    0em;
  --tracking-display: -0.03em;

  /* 行長制限（和文約38字） */
  --prose-width: 38em;

  /* ── 11. SPACING（4px base・16段） ───────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* レイアウト定数 */
  --layout-max:     1280px;
  --layout-article: 800px;
  --layout-hero:    960px;
  --page-x: clamp(24px, 4vw, 32px);

  /* ── 12. BORDER RADIUS ────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* ── 13. ELEVATION / SHADOW ──────────────────────────────── */
  --shadow-0: none;
  /* E1: カード・パネル（border併用） */
  --shadow-1: 0 1px 3px rgba(15,15,16,.06), 0 1px 1px rgba(15,15,16,.04);
  /* E2: ドロップダウン・検索オーバーレイ */
  --shadow-2: 0 4px 16px rgba(15,15,16,.10), 0 2px 4px rgba(15,15,16,.06);
  /* E3: モーダル・ダイアログ */
  --shadow-3: 0 16px 48px rgba(15,15,16,.15), 0 8px 16px rgba(15,15,16,.08);
  /* Focus ring（a11y）— color-mixで棚色に自動追従（Web専用機能・PPTX不要） */
  --ring-focus: 0 0 0 3px color-mix(in srgb, var(--color-action) 28%, transparent);

  /* ── 14. MOTION ───────────────────────────────────────────── */
  /* opacity + transform のみ使う。リフロー禁止 */
  --dur-fast:   100ms;
  --dur-base:   200ms;
  --dur-slow:   300ms;
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);  /* spring-like */
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);

  /* ── 15. ICON（Lucide統一） ───────────────────────────────── */
  --icon-size:   24px;
  --icon-sm:     16px;
  --icon-lg:     32px;
  --icon-stroke: 1.5px;

}


/* ── SHELF ACCENT OVERRIDES ─────────────────────────────────────
   サイトの <html> または <body> にクラスを付与するだけで
   action系/tint系 が一括で切り替わる。
   正式確定: 2026-06-12 Fable裁定（OKLCH一括生成・機能色衝突解消済）
   - 言葉系: 深緑→苔（ok常磐との衝突回避）
   - 観測系: 琥珀→蘇芳（warn砂との衝突回避）              */

.shelf-mothership  {   /* My Sites Hub / Brandria */
  --color-action:         var(--blue-700);
  --color-action-hover:   var(--blue-800);
  --color-action-pressed: var(--blue-900);
  --color-action-ghost:   var(--blue-600);
  --color-tint:           var(--blue-50);
  --color-tint-hover:     var(--blue-100);
}
.shelf-anatomy {   /* IRria / Deckria / Scriptria / Releasia */
  --color-action:         var(--teal-700);
  --color-action-hover:   var(--teal-800);
  --color-action-pressed: var(--teal-900);
  --color-action-ghost:   var(--teal-600);
  --color-tint:           var(--teal-50);
  --color-tint-hover:     var(--teal-100);
}
.shelf-language {  /* Slogio / Copyria / Purposeria / Kgiria */
  --color-action:         var(--moss-700);
  --color-action-hover:   var(--moss-800);
  --color-action-pressed: var(--moss-900);
  --color-action-ghost:   var(--moss-600);
  --color-tint:           var(--moss-50);
  --color-tint-hover:     var(--moss-100);
}
.shelf-visual {    /* Logoria / Markeria / Studioria / Siteria / Unifria */
  --color-action:         var(--purple-700);
  --color-action-hover:   var(--purple-800);
  --color-action-pressed: var(--purple-900);
  --color-action-ghost:   var(--purple-600);
  --color-tint:           var(--purple-50);
  --color-tint-hover:     var(--purple-100);
}
.shelf-observation { /* Futuria / Estaria / Habitria / Dashiria */
  --color-action:         var(--rose-700);
  --color-action-hover:   var(--rose-800);
  --color-action-pressed: var(--rose-900);
  --color-action-ghost:   var(--rose-600);
  --color-tint:           var(--rose-50);
  --color-tint-hover:     var(--rose-100);
}
.shelf-tools {     /* Canonria / Webria / Brand Hints / font-explorer */
  --color-action:         var(--slate-700);
  --color-action-hover:   var(--slate-800);
  --color-action-pressed: var(--slate-900);
  --color-action-ghost:   var(--slate-600);
  --color-tint:           var(--slate-50);
  --color-tint-hover:     var(--slate-100);
}


/* ── BASE STYLES ──────────────────────────────────────────────── */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--text-primary);
  background: var(--surface-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }

a {
  color: var(--color-action);
  text-decoration-color: var(--color-tint-hover);
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-action-hover); text-decoration-color: currentColor; }


/* ── TYPOGRAPHY UTILITIES ─────────────────────────────────────── */

/* 見出し: palt + tight tracking */
h1, h2, h3 {
  font-family: var(--font-display);
  font-feature-settings: "palt" 1;
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
}

/* 本文行長制限 */
.prose { max-width: var(--prose-width); }

/* 数値: tabular-nums + Inter */
.num, .numeric, td, th {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}

/* 禁則処理 */
p, li, td {
  line-break: strict;
  overflow-wrap: break-word;
}


/* ── FOCUS RING ────────────────────────────────────────────────── */

*:focus { outline: none; }
*:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--surface-base),
    var(--ring-focus);
  border-radius: var(--radius-md);
}


/* ── SKIP LINK ─────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--text-primary);
  color: var(--text-inverted);
  font-weight: 500;
  transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease);
  border-radius: 0 0 var(--radius-lg) 0;
}
.skip-link:focus { transform: translateY(0); }


/* ── REDUCED MOTION ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ── DARK MODE（semantic tokensのみ切り替え）──────────────────── */

@media (prefers-color-scheme: dark) {
  :root {
    --surface-base: var(--n-950);
    --surface-1:    var(--n-900);
    --surface-2:    #252528;
    --surface-3:    #303034;

    --text-primary:   var(--n-100);
    --text-secondary: var(--n-400);
    --text-tertiary:  var(--n-500);
    --text-disabled:  var(--n-700);

    --border:        0.5px solid #252528;
    --border-strong: 0.5px solid #303034;

    /* 暗地用アクション色（明度を上げる） */
    --color-action:       var(--blue-400);
    --color-action-hover: var(--blue-300);
    --color-tint:         rgba(53,96,170,.12);
    --color-tint-hover:   rgba(53,96,170,.20);
  }

  /* 棚ごとの暗地アクション色（400/300段・全棚 #0f0f10地で6.4:1以上） */
  .shelf-mothership {
    --color-action:       var(--blue-400);
    --color-action-hover: var(--blue-300);
    --color-tint:         rgba(53,96,170,.12);
    --color-tint-hover:   rgba(53,96,170,.20);
  }
  .shelf-anatomy {
    --color-action:       var(--teal-400);
    --color-action-hover: var(--teal-300);
    --color-tint:         rgba(0,113,111,.12);
    --color-tint-hover:   rgba(0,113,111,.20);
  }
  .shelf-language {
    --color-action:       var(--moss-400);
    --color-action-hover: var(--moss-300);
    --color-tint:         rgba(82,110,0,.12);
    --color-tint-hover:   rgba(82,110,0,.20);
  }
  .shelf-visual {
    --color-action:       var(--purple-400);
    --color-action-hover: var(--purple-300);
    --color-tint:         rgba(112,78,158,.12);
    --color-tint-hover:   rgba(112,78,158,.20);
  }
  .shelf-observation {
    --color-action:       var(--rose-400);
    --color-action-hover: var(--rose-300);
    --color-tint:         rgba(152,62,100,.12);
    --color-tint-hover:   rgba(152,62,100,.20);
  }
  .shelf-tools {
    --color-action:       var(--slate-400);
    --color-action-hover: var(--slate-300);
    --color-tint:         rgba(74,101,128,.12);
    --color-tint-hover:   rgba(74,101,128,.20);
  }
}


/* ── PRINT ─────────────────────────────────────────────────────── */

@media print {
  :root {
    --text-primary:   #000;
    --text-secondary: #000;
    --text-tertiary:  #1a1a1a;
    --color-action:   #000;
    --border:         0.5px solid #999;
  }
  body  { background: #fff; color: #000; print-color-adjust: exact; }
  a     { color: #000; text-decoration: underline; }
  *:focus-visible { box-shadow: none; }
}