/* Professional Tech Lab design-system · base.css · tokens applied · no inline hex/font */
/* ===================================================================
 * Professional Tech Lab Design System — base.css（基礎レイヤー）
 *
 * 正本トークン: ./tokens.css（var() のみ参照。独自 :root 宣言なし）
 * 規律の一次根拠: ./bengo4-corporate-evidence.md
 *
 * 本書の責務: 素の HTML 要素（h1-h6 / p / a / ul / table / code 等）に
 *   タイポ階層・余白・色を一括で焼く。コンポーネント層（components.css）は
 *   .ds-* クラスだけを書き、素要素を上書きしない前提を本書が支える。
 *
 * 規律:
 *   - 値はトークンのみ（var()）。インライン hex / 生 font-family / 独自 :root 禁止。
 *   - 要素分離は「余白＋背景色＋タイポ階層」。border は 0 起点、
 *     hairline が要る箇所だけ 1px solid var(--color-gray) を全周で。
 *   - side-stripe（border-left/top/right/bottom 2-6px solid）禁止。
 *     blockquote の引用は左罫線を使わず、余白＋字下げ＋補助色で表す。
 *   - 影は原則なし（フラット）。角丸は 0 基調。
 *   - font-weight は 400 / 500 / 700 のみ。
 *   - 左揃え基調。数値カラムだけ右揃え。
 * =================================================================== */

@layer base {

  /* === ドキュメントの基底（html/body の色・書体は tokens.css @layer base で確定済み。
   *      本書では本文の最大読み幅・選択色など読み物としての基底だけを足す） === */
  body {
    text-align: left;
    text-underline-offset: 0.15em;
  }

  ::selection {
    background-color: var(--color-gray-200);
    color: var(--color-black);
  }

  /* === 見出し h1-h6（巨大serif見出しにしない・墨黒・左揃え・余白で階層化） === */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-noto);
    color: var(--color-black);
    text-align: left;
    text-wrap: balance;
  }

  h1 {
    font-size: var(--text-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-5);
  }

  h2 {
    font-size: var(--text-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
  }

  h3 {
    font-size: var(--text-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-snug);
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
  }

  h4 {
    font-size: var(--text-h4);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-snug);
    margin-top: var(--space-5);
    margin-bottom: var(--space-2);
  }

  h5 {
    font-size: var(--text-h5);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-snug);
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
  }

  h6 {
    font-size: var(--text-h6);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-wide);
    color: var(--color-subtle-strong);
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
  }

  /* 連続見出しや本文直後の最初の見出しは天井余白を詰める（縦リズムの暴れ防止） */
  h1:first-child,
  h2:first-child,
  h3:first-child,
  h4:first-child,
  h5:first-child,
  h6:first-child {
    margin-top: 0;
  }

  /* === 本文 === */
  p {
    font-family: var(--font-noto);
    font-size: var(--text-body);
    font-weight: var(--font-weight-normal);
    line-height: var(--leading-normal);
    color: var(--color-black);
    margin-bottom: var(--space-4);
  }

  p:last-child {
    margin-bottom: 0;
  }

  strong,
  b {
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
  }

  em,
  i {
    font-style: italic;
  }

  small {
    font-size: var(--text-small);
    line-height: var(--leading-snug);
    color: var(--color-subtle);
  }

  mark {
    background-color: var(--color-warning-bg);
    color: var(--color-black);
    padding: 0 calc(var(--spacing) * 0.5);
    border-radius: var(--radius-soft);
  }

  sub,
  sup {
    font-size: var(--text-small);
    line-height: 0;
  }

  del,
  s {
    color: var(--color-subtle);
    text-decoration-thickness: 1px;
  }

  ins,
  u {
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  /* === リンク a（リンク色は墨黒 --color-link。hover で下線。全状態を定義） === */
  a {
    font-family: inherit;
    color: var(--color-link);
    text-decoration: none;
    text-underline-offset: 0.15em;
    transition: color var(--duration-base) var(--ease-in-out),
      text-decoration-color var(--duration-base) var(--ease-in-out);
  }

  a:hover {
    text-decoration: underline;
    text-decoration-color: var(--color-black);
  }

  a:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    text-decoration: underline;
  }

  a:visited {
    color: var(--color-link);
  }

  a:active {
    color: var(--color-subtle-strong);
  }

  /* === リスト ul / ol / li / dl === */
  ul,
  ol {
    font-family: var(--font-noto);
    font-size: var(--text-body);
    line-height: var(--leading-normal);
    color: var(--color-black);
    padding-left: var(--space-5);
    margin-bottom: var(--space-4);
  }

  ul {
    list-style: disc;
  }

  ol {
    list-style: decimal;
  }

  /* 入れ子リスト: マーカー段階を変えつつ天地余白を詰める */
  ul ul {
    list-style: circle;
  }

  ul ul ul {
    list-style: square;
  }

  li {
    margin-bottom: var(--space-2);
  }

  li:last-child {
    margin-bottom: 0;
  }

  li > ul,
  li > ol {
    margin-top: var(--space-2);
    margin-bottom: 0;
  }

  li::marker {
    color: var(--color-subtle);
  }

  dl {
    font-family: var(--font-noto);
    font-size: var(--text-body);
    line-height: var(--leading-normal);
    color: var(--color-black);
    margin-bottom: var(--space-4);
  }

  dt {
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
    margin-bottom: var(--space-1);
  }

  dd {
    color: var(--color-subtle-strong);
    margin-left: var(--space-5);
    margin-bottom: var(--space-3);
  }

  dd:last-child {
    margin-bottom: 0;
  }

  /* === コード code / pre / kbd / samp === */
  code,
  kbd,
  samp {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }

  /* インライン code: 淡背景＋小padding（hairline は使わず背景で分離） */
  code {
    font-size: 0.9em;
    background-color: var(--color-gray-050);
    color: var(--color-black);
    padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1.5);
    border-radius: var(--radius-soft);
  }

  /* ブロック pre: 淡背景・横スクロール・内側 code は背景を二重に出さない */
  pre {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    line-height: var(--leading-snug);
    color: var(--color-black);
    background-color: var(--color-gray-050);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    overflow-x: auto;
    border-radius: var(--radius-soft);
    -webkit-overflow-scrolling: touch;
  }

  pre code {
    font-size: inherit;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
  }

  kbd {
    font-size: var(--text-small);
    color: var(--color-black);
    background-color: var(--color-gray-100);
    padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1.5);
    border: var(--border-hairline);
    border-radius: var(--radius-soft);
  }

  /* === 引用 blockquote（左罫線=side-stripe を使わず、余白＋字下げ＋補助色で表す） === */
  blockquote {
    font-family: var(--font-noto);
    font-size: var(--text-body);
    line-height: var(--leading-normal);
    color: var(--color-subtle-strong);
    margin: var(--space-5) 0;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  blockquote p {
    color: var(--color-subtle-strong);
  }

  blockquote cite {
    display: block;
    font-size: var(--text-small);
    font-style: normal;
    color: var(--color-subtle);
    margin-top: var(--space-2);
  }

  /* === 罫線 hr（hairline 1px・上下余白。border:0 起点なので明示） === */
  hr {
    height: 1px;
    border: 0;
    background-color: var(--color-gray);
    margin: var(--space-6) 0;
  }

  /* === 表 table（ヘッダ行は下hairline・セル余白・ゼブラは淡背景まで・数値は右寄せ可） === */
  table {
    font-family: var(--font-noto);
    font-size: var(--text-body);
    line-height: var(--leading-snug);
    color: var(--color-black);
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-4);
    text-align: left;
  }

  caption {
    font-size: var(--text-small);
    color: var(--color-subtle);
    text-align: left;
    padding-bottom: var(--space-2);
  }

  th {
    font-weight: var(--font-weight-bold);
    color: var(--color-subtle-strong);
    text-align: left;
    vertical-align: bottom;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-gray);
  }

  td {
    color: var(--color-black);
    text-align: left;
    vertical-align: top;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-gray);
  }

  /* 数値カラムは右寄せ＋tabular（属性 / クラスのどちらでも当たる） */
  th[data-numeric],
  td[data-numeric],
  th.is-numeric,
  td.is-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  /* ゼブラは淡背景まで（罫線連発しない） */
  tbody tr:nth-child(even) {
    background-color: var(--color-gray-050);
  }

  tbody tr:last-child td {
    border-bottom: 0;
  }

  tfoot td {
    font-weight: var(--font-weight-medium);
    color: var(--color-subtle-strong);
    border-top: 1px solid var(--color-gray);
    border-bottom: 0;
  }

  /* === 図 figure / figcaption === */
  figure {
    margin-bottom: var(--space-5);
  }

  figure img,
  figure svg {
    display: block;
    max-width: 100%;
    height: auto;
    background-color: var(--color-img-bg);
  }

  figcaption {
    font-size: var(--text-small);
    line-height: var(--leading-snug);
    color: var(--color-subtle);
    margin-top: var(--space-2);
  }

  /* === メディア基底（はみ出し防止・背景プレースホルダ） === */
  img,
  video,
  canvas {
    max-width: 100%;
    height: auto;
  }

  /* === 略語 abbr / 時刻 time === */
  abbr[title] {
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    cursor: help;
  }

  time {
    font-family: var(--font-en);
    font-variant-numeric: tabular-nums;
    color: inherit;
  }

  /* === フォーム素要素の最低限の継承（書体・色をトークンに揃える。
   *      具体的な見た目は components.css の .ds-* が担う） === */
  input,
  textarea,
  select,
  button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
  }

  /* アクセシビリティ: 動きを抑える設定を尊重（過剰なイージングは元々不採用） */
  @media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
    }
  }
}