/**
 * @notion-headless-cms/react-renderer の既定テーマ。
 *
 * 利用側の Tailwind v4 エントリ CSS で `@import "tailwindcss"` の後に 1 行
 * `@import "@notion-headless-cms/react-renderer/theme.css";` するだけで、
 *   1. レンダラ dist の class 名を Tailwind のスキャン対象に含める（@source）
 *   2. shadcn セマンティックトークン（bg-card / text-muted-foreground 等）を
 *      Tailwind v4 の色トークンへブリッジする（@theme inline）
 *   3. ライト/ダークの既定パレットを供給する（:root / .dark）
 * の 3 点がまとめて入る。各ブロックは shadcn トークンに依存して描画されるため、
 * これが無いと引用・コールアウト・コードのキャプション等が無色になる。
 *
 * 色を変えたいときは、この import の「後」に `:root { --primary: ...; }` のように
 * トークンを上書きする（neutral な既定値を自サイトのブランドカラーへ振り直せる）。
 */

/* レンダラ dist を Tailwind v4 のスキャン対象へ。利用側で別途 @source を書かなくてよい。
   パスはこのファイル（styles/）から見た ../dist。 */
@source "../dist";

/* `.dark` クラス（NotionThemeProvider が付与）で dark: ユーティリティを駆動する。
   既定の prefers-color-scheme 方式ではなく class 方式にして、明示トグルを効かせる。 */
@custom-variant dark (&:where(.dark, .dark *));

/* shadcn/ui の Tailwind v4 ブリッジ。:root / .dark で定義した CSS 変数を
   Tailwind の色トークン（bg-primary / text-muted-foreground 等）として公開する。 */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-surface: var(--surface);
  --color-surface-foreground: var(--surface-foreground);
  --color-code: var(--code);
  --color-code-foreground: var(--code-foreground);
  --radius-sm: calc(var(--radius) - 2px);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) + 4px);
  --radius-xl: calc(var(--radius) + 8px);
}

/* 既定ライトパレット（neutral）。利用側はこの import の後で個別トークンを上書きする。 */
:root {
  --background: #ffffff;
  --foreground: #0a0a0a;
  --card: #ffffff;
  --card-foreground: #0a0a0a;
  --popover: #ffffff;
  --popover-foreground: #0a0a0a;
  --primary: #171717;
  --primary-foreground: #fafafa;
  --secondary: #f5f5f5;
  --secondary-foreground: #171717;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --accent: #f5f5f5;
  --accent-foreground: #171717;
  --destructive: #e7000b;
  --destructive-foreground: #fafafa;
  --border: #e5e5e5;
  --input: #e5e5e5;
  --ring: #a1a1a1;
  --surface: #fafafa;
  --surface-foreground: #171717;
  --code: #fafafa;
  --code-foreground: #171717;
  --radius: 0.625rem;
}

/* 既定ダークパレット（neutral）。NotionThemeProvider が付ける `.dark` で有効化される。 */
.dark {
  --background: #0a0a0a;
  --foreground: #fafafa;
  --card: #171717;
  --card-foreground: #fafafa;
  --popover: #171717;
  --popover-foreground: #fafafa;
  --primary: #fafafa;
  --primary-foreground: #171717;
  --secondary: #262626;
  --secondary-foreground: #fafafa;
  --muted: #262626;
  --muted-foreground: #a1a1a1;
  --accent: #262626;
  --accent-foreground: #fafafa;
  --destructive: #ff6467;
  --destructive-foreground: #fafafa;
  --border: #2a2a2a;
  --input: #2a2a2a;
  --ring: #737373;
  --surface: #1a1a1a;
  --surface-foreground: #fafafa;
  --code: #171717;
  --code-foreground: #fafafa;
}

/*
 * コードブロック（`react-renderer` の `Code` + `@notion-headless-cms/notion-shiki` の
 * `highlightCodeBlocks` が出力する rehype-pretty-code HTML）の見た目。
 * shadcn docs に寄せる。Tailwind ユーティリティでは表現しづらい
 * デュアルテーマ切替・行番号 counter をここで定義する。
 */

/* shiki デュアルテーマ。トークン span は `--shiki-light` / `--shiki-dark` を inline で
   持つので、既定はライト、`.dark` 配下でダークへ切り替える。 */
.nhc-code span {
  color: var(--shiki-light);
}
.dark .nhc-code span {
  color: var(--shiki-dark);
}

/* 各行を 1 グリッド行に。fallback（素の pre）でも cached（rehype-pretty-code）でも
   同じ構造（pre > code[data-line-numbers] > span[data-line]）になる。 */
.nhc-code pre {
  margin: 0;
  overflow-x: auto;
  padding: 0.75rem 0;
  font-size: 0.8125rem;
  line-height: 1.6;
}
.nhc-code pre code {
  display: grid;
  min-width: 100%;
  background: transparent;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.nhc-code [data-line] {
  padding: 0 1rem;
}

/* 行番号: counter を gutter として描画する。 */
.nhc-code code[data-line-numbers] {
  counter-reset: line;
}
.nhc-code code[data-line-numbers] > [data-line]::before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  width: 1rem;
  margin-right: 1.5rem;
  text-align: right;
  color: var(--muted-foreground);
}

/* 強調行（rehype-pretty-code の `{1,3-5}` メタ）。 */
.nhc-code [data-highlighted-line] {
  background-color: color-mix(in oklab, var(--muted) 60%, transparent);
}