/* ===================================================================
 * Professional Tech Lab Design System — Tokens（単一真実源）
 * プロフェッショナルテックラボ デザインシステム / 値の正本
 *
 * 一次根拠（トンマナの出所）: ./bengo4-corporate-evidence.md
 *   弁護士ドットコム コーポレートサイト実体CSS（2026-05-28取得）。
 *   Professional Tech Lab は弁護士ドットコムの開発組織であり、
 *   グループのコーポレート・トンマナを基盤に本デザインシステムを発行する。
 *
 * 適用範囲（v1）: vanilla HTML/CSS のダッシュボード・管理画面・LP・社内UI。
 *   各ページは本ファイルを <link rel="stylesheet"> で参照し、
 *   独自の :root 上書き・インライン color / font-family を一切書かない。
 *   値を変えるときは本ファイルだけを直す（各プロジェクトへ手書きコピーしない）。
 *
 * 層構成: Tokens(本書=値) → base.css(基礎=素HTML) → components/(部品) → patterns(組合せ)
 *
 * カラーの2系統:
 *   ① コーポレート正本（--color-black/white/gray/red/img-bg/subtle/cta）— 弁コム実体準拠・改変禁止。
 *      コーポレート公開面はこの層だけで組む。
 *   ② UI拡張（--color-*-ext / セマンティック状態色 / 状態背景tint）— 社内ダッシュボード・管理画面の
 *      状態フィードバック専用。コーポレート公開面・対外資料では使わない（純度を守る）。
 * =================================================================== */

@layer theme {
  :root {
    /* === ① コーポレート正本カラー（実体エビデンス §2・改変禁止） === */
    --color-black:        #28282d; /* 本文・見出し（純黒でなくわずか青み） */
    --color-white:        #fff;    /* サーフェス（カード/コンテナ）背景 */
    --color-gray:         #e6e6e6; /* hairline border / 区切り線 */
    --color-red:          #c00;    /* 強調・警告・赤シグナル（1画面1〜2要素まで） */
    --color-img-bg:       #f3f4f6; /* ページ背景（うっすら）/ 薄背景パネル */
    --color-subtle:       #6b6b6e; /* 補助テキスト・補助情報 */
    --color-subtle-strong:#595959; /* a11y: 小文字・密集時に 4.5:1 を満たす補助色 */
    --color-cta:          #ff2257; /* CTA専用赤（warning の --color-red と用途分離） */

    /* === グレースケール段階（墨黒〜白の中間。border:0思想を保ちつつ濃淡で階層化） === */
    --color-gray-900: #28282d; /* = black */
    --color-gray-700: #595959;
    --color-gray-600: #6b6b6e;
    --color-gray-400: #adadae;
    --color-gray-300: #ccc;
    --color-gray-200: #e6e6e6; /* = gray(hairline) */
    --color-gray-100: #f3f4f6; /* = img-bg */
    --color-gray-050: #f8f8f8;

    /* === ② UI拡張: ダッシュボード状態色（社内UI専用・公開面では使わない） === */
    --color-pos-ext:    #2e7d32; /* 好調シグナル（控えめな緑） */
    --color-warn-ext:   #c77700; /* 注意シグナル（黄信号の橙） */
    --color-chart-soft: #b8b8bd; /* グラフ補助線・前年比など控えめな線 */

    /* === ② UI拡張: セマンティック状態色ロール（success/warning/error/info/link） ===
     * error はコーポレート正本 --color-red を流用。success/warning/info は拡張。
     * 状態背景tint は淡色のみ（赤背景フルブリードは禁止）。 */
    --color-success:     var(--color-pos-ext);  /* #2e7d32 */
    --color-warning:     var(--color-warn-ext); /* #c77700 */
    --color-error:       var(--color-red);      /* #c00（正本） */
    --color-info:        #0b6fa8;               /* 控えめな情報青（拡張） */
    --color-link:        var(--color-black);    /* リンクは墨黒＋下線（コーポレート準拠） */

    --color-success-bg:  #eaf3ea; /* 状態tint（淡）— 社内UI専用 */
    --color-warning-bg:  #f7efe1;
    --color-error-bg:    #fbeaea;
    --color-info-bg:     #e8f1f6;

    /* === ブランド・テーマ（プロジェクトのイメージカラー） ===
     * コア（墨黒・Noto・枠線なし・部品）は固定し、ブランド色だけを
     * themes/*.css でプロジェクト別に差し替える。既定は中立（墨黒）＝弁コム。
     * アクセントは控えめに使う（1画面1ハイライト原則を保つ）。
     * 上書きは themes/ の .theme-* / [data-theme] セレクタで行い、
     * 消費ページ側で独自 :root を書かない。 */
    --brand:      var(--color-black); /* プロジェクトのイメージ/アクセント色 */
    --brand-bg:   var(--color-black); /* 濃色面（スライドのセクション扉背景等） */
    --brand-on:   var(--color-white); /* brand-bg 上のテキスト色 */
    --brand-soft: var(--color-img-bg);/* brand の淡tint（帯・補助面） */

    /* === スライド専用スケール（slides.css が使用・Web UIでは使わない） ===
     * 16:9固定・投影前提の大きい級数。Webの --text-* とは別系。 */
    --slide-w: 1280px;
    --slide-h: 720px;           /* 16:9 */
    --slide-pad-x: 4.5rem;      /* 72px */
    --slide-pad-y: 3.25rem;     /* 52px */
    --slide-fs-mega:  11.25rem; /* 180px 背景セクション番号 */
    --slide-fs-title: 3.25rem;  /* 52px 表紙/セクション/締め見出し */
    --slide-fs-h:     1.875rem; /* 30px サブ見出し */
    --slide-fs-lead:  1.5rem;   /* 24px リード */
    --slide-fs-body:  1.25rem;  /* 20px 本文 */
    --slide-fs-label: 0.9375rem;/* 15px ラベル */

    /* === 書体（実体エビデンス §1・セリフ/汎用書体は禁止） === */
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --font-noto: "Noto Sans JP", NotoSansJP, sans-serif;                              /* 本文・見出し */
    --font-en:   "Bai Jamjuree", BaiJamjuree, "Noto Sans JP", NotoSansJP, sans-serif; /* 数値・英文 */
    --default-font-family: var(--font-sans);

    /* === フォントウェイト（実体エビデンス §5：400/500/700のみ採用） === */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold:   700;

    /* === タイプスケール（要素セレクタへ焼かずスケール変数で持つ） === */
    --text-h1:    2rem;      /* 32px 主見出し */
    --text-h2:    1.5rem;    /* 24px 大見出し */
    --text-h3:    1.25rem;   /* 20px セクション見出し */
    --text-h4:    1.125rem;  /* 18px 小見出し */
    --text-h5:    1rem;      /* 16px */
    --text-h6:    0.875rem;  /* 14px ラベル見出し */
    --text-label: 0.875rem;  /* 14px カード見出し・ラベル */
    --text-body:  0.875rem;  /* 14px 本文 */
    --text-small: 0.75rem;   /* 12px 補助テキスト */
    --text-kpi:   3rem;      /* 48px KPI大数値（40〜56px帯の中央値） */
    --text-kpi-sm: 2.5rem;   /* 40px KPI中数値（--text-kpi の一段下・予実バー現在地等） */
    --text-hero:  clamp(2.5rem, 5.6vw, 4.25rem); /* 40〜68px ヒーロー代表値（見せダッシュボードの最上位1数字。--text-kpi の一段上） */

    --leading-tight:  1.2;
    --leading-snug:   1.4;
    --leading-normal: 1.6;
    --tracking-tight: -0.01em;
    --tracking-wide:  0.04em;

    /* === 余白とコンテナ（実体エビデンス §4：4pxグリッド・最大1152px） === */
    --spacing:       0.25rem; /* 4px base。全余白は calc(var(--spacing)*N) で組む */
    --space-1: 0.25rem;  /* 4px  */
    --space-2: 0.5rem;   /* 8px  */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.5rem;   /* 24px */
    --space-6: 2rem;     /* 32px */
    --space-8: 3rem;     /* 48px */
    --space-10: 4rem;    /* 64px */
    --container-max: 72rem;   /* 1152px。フルブリードは使わない */
    --container-narrow: 40rem;/* 640px 読み物幅 */
    --pad-card:      1.5rem;  /* 24px カード内padding標準 */
    --gap-card:      1rem;    /* 16px カード間gap標準 */
    --gap-section:   2rem;    /* 32px セクション間最小余白 */

    /* === ブレークポイント（メディアクエリ用の基準値・文書化トークン） ===
     * CSS の @media は var() を取れないため、各CSSは下記の実値で @media を書く。 */
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;

    /* === 角丸（実体準拠：標準0・強調箇所のみ2px。大角丸は使わない） === */
    --radius-sharp: 0;
    --radius-soft:  2px;
    --radius-pill:  999px; /* バッジ/チップのピル形のみ */

    /* === ボーダー（border:0起点。hairlineは1pxを全周で） === */
    --border-hairline: 1px solid var(--color-gray);
    --border-width:    1px;

    /* === エレベーション（フラット基調：影は最小限。階層は余白＋背景で） === */
    --shadow-none: none;
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:   0 2px 8px rgba(0, 0, 0, 0.06);  /* モーダル/ポップオーバー等の浮遊面のみ */

    /* === z-index レイヤリング === */
    --z-base:     0;
    --z-sticky:   1100;
    --z-dropdown: 1200;
    --z-overlay:  1300;
    --z-modal:    1300;
    --z-popover:  1400;
    --z-toast:    1500;
    --z-tooltip:  1600;

    /* === フォーカスリング（a11y：キーボード focus-visible 用） === */
    --focus-ring:        2px solid var(--color-black);
    --focus-ring-offset: 2px;

    /* === モーション（実体エビデンス §7：150ms基調・bounce/elastic禁止） === */
    --duration-fast:  100ms;
    --duration-base:  150ms;
    --duration-slow:  240ms;
    --default-transition-duration:        150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out-cubic: cubic-bezier(0.17, 0.67, 0.55, 1);
  }
}

@layer base {
  /* 全要素 border:0 起点（実体エビデンス §3）。
   * 要素分離は ①余白 ②背景色 ③タイポ階層 の3手段のみ。
   * side-stripe（border-left 2-6px solid）は禁忌。 */
  *,
  ::before,
  ::after,
  ::backdrop,
  ::file-selector-button {
    border: 0 solid;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html,
  body {
    font-family: var(--font-noto);
    font-weight: var(--font-weight-normal);
    color: var(--color-black);
    background-color: var(--color-img-bg);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* キーボードフォーカスの可視化（マウス時は出さない） */
  :focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  /* 数値・英文混在ユーティリティ（tabular-nums で桁揃え） */
  .num,
  .en {
    font-family: var(--font-en);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }

  /* 等幅（コード・厳密な数値カラム用） */
  .mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }

  /* スクリーンリーダー専用（視覚に出さず文書構造を1本通す） */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}