@layer lism-base {
  /* === トークン上書き・独自定義 === */
  :root {
    --base: hsl(220, 0%, 98%);
    --base-2: hsl(220 4% 94%);
    --brand: hsl(204, 64%, 30%);
    --link: hsl(212, 80%, 50%);

    /* font : Gen Interface JP → see: https://gen.typesetting.jp/ */
    --ff--base: 'Gen Interface JP', 'Hiragino Sans', sans-serif;
    /* 800px ~ 1000px で変化*/
    --fz--base: clamp(1rem, 0.8rem + 0.4vw, 1.05rem);
    --lts--base: 0.02em;
    --headings-fw: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* コンテンツサイズ */
    --sz--l: calc(var(--sz--m) + var(--sz--toc) + var(--s40));
    --sz--toc: 240px;

    /* ヘッダーの高さ (jsで動的セットされる） */
    --header-h: 60px;
  }

  /* === 見出しジャンプ時のスクロールパディング === */
  html {
    scroll-padding-top: calc(var(--header-h) + 0.5rem);
  }

  /* === リンクスタイル === */
  a {
    text-decoration-thickness: 1.5px;
    text-decoration-color: var(--link);
    text-underline-offset: 0.2em;
  }
  a:where(:hover, :focus-visible) {
    text-decoration-thickness: 3px;
    text-decoration-skip-ink: none;
  }

  /* === ダークモード === */
  :root[data-theme='dark'] {
    /* パレットカラーの明度調整 */
    --L: 70%;

    --base: hsl(204, 6%, 15%);
    --base-2: hsl(204, 4%, 12%);
    --text: hsl(204, 2%, 94%);
    --text-2: hsl(204, 6%, 80%);
    --divider: hsl(204, 6%, 30%);
    --brand: hsl(204, 64%, 64%);
    --link: hsl(212, 88%, 64%);

    /* shadow color */
    --shc: hsl(204 4% 10% / 90%);

    /* color mix */
    --cbox-cPct: 4%;
    --cbox-bgPct: 6%;
  }

  /* === ブログコンテンツのスタイリング === */
  .c--content {
    > h2 {
      padding-block: var(--s5);
      padding-inline-start: calc(4px + 0.375em);
      border-inline-start: 4px solid;
    }

    :not(pre) > code {
      --hl: 1px;
      display: inline-flex;
      background-color: var(--base-2);
      font-size: 0.925em;
      padding: 3px 0.25em;
      margin-inline: 0.125em;
      border-radius: var(--bdrs--10);
    }
    a > code {
      text-decoration: inherit;
    }

    blockquote {
      border-inline-start: 2px solid var(--text-2);
      border-radius: 2px;
    }

    table {
      font-size: var(--fz--s);

      /* memo: oveflow の指定によっては separate にしないとborderが表示されない場合があるので横スクロール時には注意。 */
      border-collapse: collapse;
      border-spacing: 0;
      isolation: isolate;
    }
    :is(td, th) {
      border-block: 1px solid var(--divider);
    }
    thead {
      border-block-end: solid 2px;
    }

    /* === 見出しアンカーリンク === */
    /* "#" は ::after で描画する。（目次に拾われるのを回避するため） */
    .c--headingAnchor {
      color: var(--text-2);
      font-family: var(--ff--mono);
      font-weight: 400;
      text-decoration: none;
      margin-inline-start: 0.25em;
      opacity: 0;
      transition: opacity 0.15s;
    }
    .c--headingAnchor::after {
      content: '#';
    }
    *:hover > .c--headingAnchor,
    .c--headingAnchor:focus-visible {
      opacity: 1;
    }
  }
}

/* === Expressive Code（```ブロック）最小スタイリング === */
/* Expressive Codeのレイヤー外CSSより優先するためレイヤー外 */
.expressive-code:not(#_) {
  /* コードタイトル */
  .header > .title {
    font-size: var(--fz--s);
  }

  /* コピーボタン */
  .copy button {
    border-radius: var(--bdrs--10);
    --ec-frm-inlBtnBgHoverOrFocusOpa: 0.1;
  }
}