/*
 * tiptop design tokens.
 *
 * `--tiptop-*` / `--tt-*` のトークン定義だけを持つ層。Issue #1150 で
 * design-system.css から分離した。
 *
 * 分離した理由：design-system.css は「トークン定義」と「標準デザインの見た目」を
 * 1ファイルで兼ねていたため、子テーマが標準の見た目を外そうとするとトークンごと
 * 消え、main.css / base-system.css の var() が全滅していた。トークンはどのデザイン
 * システムでも土台として必要なので、この層は `tiptop_theme_design_layer_enabled` を
 * false にしても外れない（inc/design-layer.php）。
 *
 * ロード順は main.css の直後・design-system.css の直前＝分離前と同じ位置。
 * 宣言の並びも分離前のまま（カスケードの勝敗を変えないため）。
 */

:root {
	/* Monochrome base tokens. design-system.css loads after main.css, so these
	 * values intentionally override older warm accent defaults without deleting
	 * legacy page CSS in this phase. */
	--tiptop-primary: #111111;
	--tiptop-accent: #111111;
	--tiptop-contrast: #111111;
	--tiptop-text: #222222;
	--tiptop-muted: #707070;
	--tiptop-base: #ffffff;
	--tiptop-surface: #f7f7f7;
	--tiptop-surface-alt: #f2f2f2;
	--tiptop-border: #e4e4e4;
	--tiptop-shadow: none;

	/* Color aliases */
	--tt-color-brand: var(--tiptop-primary);
	--tt-color-accent: var(--tiptop-accent);
	--tt-color-accent-label: var(--tiptop-muted);
	--tt-color-text: var(--tiptop-text);
	--tt-color-heading: var(--tiptop-contrast);
	--tt-color-muted: var(--tiptop-muted);
	--tt-color-base: var(--tiptop-base);
	--tt-color-surface: var(--tiptop-surface);
	--tt-color-surface-alt: var(--tiptop-surface-alt);
	--tt-color-border: var(--tiptop-border);
	--tt-color-action: var(--tiptop-primary);
	--tt-color-success: #237a4b;
	--tt-color-warning: #9f6b00;
	--tt-color-danger: #b3261e;

	/* Typography aliases */
	--tt-font-body: var(--tiptop-font-body, sans-serif);
	--tt-font-heading: var(--tt-font-body);
	--tt-font-admin: "Noto Sans JP", "Noto Sans", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
	--tt-text-xs: 0.72rem;
	--tt-text-sm: 0.82rem;
	--tt-text-md: 0.92rem;
	--tt-text-lg: 1.18rem;
	/* モックの段（docs/typography-scale.md §3 が正本）。 */
	--tt-text-hero: clamp(1.9rem, 4.4vw, 2.8rem);
	--tt-text-title: clamp(1.5rem, 2.6vw, 2.2rem);
	--tt-text-section: clamp(1.5rem, 3.4vw, 2.3rem);
	/* フッター直前の共通CTAの見出しだけ、節見出し（36.8px）より1段小さい。
	 * 和文の1文なので同じ大きさだと大きすぎた（Issue #956）。
	 * 役割が1つしか無いのでコンポーネント側に生値を書かず、段としてここに持つ。 */
	--tt-text-cta: clamp(1.35rem, 3vw, 2rem);
	--tt-text-card: 0.94rem;
	--tt-text-heading: 1.16rem;
	--tt-text-subheading: 1rem;
	--tt-text-note: 0.84rem;
	--tt-text-label: 0.78rem;
	--tt-text-logo: 1.5rem;
	--tt-text-numeral: clamp(2.2rem, 4.5vw, 3.4rem);
	--tt-text-numeral-xl: clamp(4rem, 14vw, 8rem);
	--tt-leading-tight: 1.35;
	--tt-leading-base: 1.95;
	--tt-leading-loose: 2.05;
	--tt-letter-heading: 0.08em;
	--tt-letter-label: 0.12em;

	/* Layout aliases */
	--tt-width-narrow: var(--tiptop-text-width);
	--tt-width-default: var(--tiptop-site-width);
	/* #418: matches --tt-width-base-wide's formula exactly (this token
	 * had zero consumers before, so copying it here is risk-free) so that
	 * token can become a pure alias instead of holding its own literal. */
	--tt-width-wide: min(1280px, calc(100vw - clamp(40px, 8vw, 144px)));
	--tt-width-full: 100%;
	--tt-gutter-desktop: 44px;
	--tt-gutter-tablet: 32px;
	--tt-gutter-mobile: 20px;

	/* Breakpoint aliases for documentation and media-query parity. */
	--tt-breakpoint-mobile: 640px;
	--tt-breakpoint-tablet: 820px;
	--tt-breakpoint-desktop: 900px;
	--tt-breakpoint-wide: 1160px;

	/* Spacing scale */
	--tt-space-1: 4px;
	--tt-space-2: 8px;
	--tt-space-3: 12px;
	--tt-space-4: 16px;
	--tt-space-5: 24px;
	--tt-space-6: 32px;
	--tt-space-7: 48px;
	--tt-space-8: 64px;
	--tt-space-section: clamp(68px, 8vw, 112px);
	--tt-space-section-compact: clamp(56px, 7vw, 88px);
	--tt-space-card: var(--tt-space-5);
	--tt-space-form-row: var(--tt-space-4);
	--tt-space-button-x: 1.35rem;
	--tt-space-button-y: 0.72rem;

	/* Shape and elevation aliases */
	--tt-radius-none: 0;
	--tt-radius-xs: 0;
	--tt-radius-sm: 0;
	--tt-radius-md: 0;
	--tt-radius-pill: 999px;
	/* 真円（アバター・丸トリミングの画像・ドット）。pill(999px) と使い分ける：
	 * pill は「両端が半円の角丸」、circle は正方形を真円にする用途。 */
	--tt-radius-circle: 50%;
	--tt-radius-button: var(--tt-radius-none);
	/* 影の役割は3つ（Issue #1151 で全 box-shadow をここへ寄せた）。
	 * 既定は全て none ＝ 標準デザインはフラット。子テーマがこの3つを上書きすれば、
	 * 該当する面すべてに一斉に効く（以前は box-shadow が58箇所へ直書きされていて、
	 * トークンを上書きしても何も起きなかった）。
	 *   none     … ネイティブUIのリセット・「ここには影を出さない」の明示
	 *   card     … カード／パネル／画像など、面として置かれるもの
	 *   floating … ヘッダー・トップへ戻るボタンなど、浮いているもの */
	--tt-shadow-none: none;
	--tt-shadow-card: none;
	--tt-shadow-floating: none;
	/* 標準デザインで唯一、実体のある影。オフセット型ヒーローの本文カードが
	 * 画像に重なるため、境界を出すのに使っている（base-system.css）。役割が1つしか
	 * 無いので card/floating には混ぜず、独立したトークンとして持つ。 */
	--tt-shadow-hero-offset: 0 24px 48px -20px color-mix(in srgb, var(--tiptop-contrast) 22%, transparent);

	/* Layer aliases */
	--tt-z-header: 20;
	--tt-z-floating: 9998;
	--tt-z-toolbar: 9999;

	/* Motion aliases */
	--tt-motion-duration-fast: 0.2s;
	--tt-motion-easing-standard: ease;

	/* Scene veil fallback. immersive-system.css always reassigns this per
	 * palette tone, so this value only matters if that reassignment is
	 * somehow skipped — kept as the single fallback source instead of
	 * repeating "2 10 17" inline at each call site. */
	--tt-scene-veil: 2 10 17;

	/* #416: subtle ink/contrast/action/primary tint scale — replaces a dozen+
	 * one-off color-mix percentages (4/5/6/8% / 10/12/14/18% / 28/30%) with
	 * 3 named steps. --tt-tint-emphasis is a documented exception, not a 4th
	 * step: interactive-control borders (buttons/inputs/pills) that need more
	 * contrast than a decorative tint keep their own value here instead of
	 * scattering the magic number "45%" across files. */
	--tt-tint-faint: 6%;
	--tt-tint-soft: 16%;
	--tt-tint-strong: 30%;
	--tt-tint-emphasis: 45%;
}

/* 本実装：標準モードのみ角丸方針を反転（0→丸みあり）。イマーシブは
 * この:rootの既定値0をそのまま使う（イマーシブ側での上書きルールは追加しない）。 */
body.tiptop-standard-system {
	--tt-radius-sm: 8px;
	--tt-radius-md: 14px;
	--tt-radius-button: var(--tt-radius-pill);
	/* 下層ページの節リズムをトップと同じ112pxに揃える。
	 * base-system.css の既定 clamp(104px, 13vw, 190px) はワイド画面で190pxまで開き、
	 * トップ（--tt-space-section＝112px）と別のリズムになっていた。
	 * :root(0,1,0)よりこちらが詳細度で勝つため、読み込み順に依存しない。
	 * base-system.css の781px以下 :root 上書き（clamp(72px, 18vw, 110px)）にも勝つので、
	 * モバイルも 110px → --tt-space-section（781px時68px）へ揃う。これも意図通り
	 * （モバイルのトップが68pxリズムなので、下層だけ110pxで開くのを解消する）。 */
	--tt-base-section-space: var(--tt-space-section);
	/* 下層ページのヒーローは節（112px）より少し詰める。モック `--tt-space-hero` と同値。
	 * 一覧ヒーローがcompactという #405 の役割差はそのまま踏襲している。 */
	--tt-space-hero-standard: clamp(56px, 7vw, 88px);
	/* 読み物の測度。承認済みモックは全ページ共通で本文の `max-width: 42em`＝
	 * 本文0.92rem基準の618px。**em を各要素に書くと「その要素が継承したfont-size」で
	 * 解決されて同じ42emでも値が割れる**（ニュース詳細でヘッダー672px／本文618pxに
	 * 割れた実例あり）ので、42文字ぶんをpxに解決したトークン1つで持つ。
	 * 実サイトの --tiptop-text-width は720pxで、モックより1行あたり5文字ほど長い。 */
	--tt-measure-reading: calc(42 * 0.92rem);
	/* 日本語の読み物は1行35〜45文字が標準で、42文字が --tt-measure-reading。
	 * 52文字はやや長いが読める範囲の上限。サイドバーのある詳細ページで、
	 * 広い画面のときに右の余白が目立つのを減らすために足した（Issue #1243）。
	 * max-width なので、カラムがこれより狭い画面では自動的にカラム幅いっぱいになる。
	 * 1440px 前後のノートでは余白がほぼ出ない。1行72文字（カラム幅いっぱい）は採らなかった。 */
	--tt-measure-reading-wide: calc(52 * 0.92rem);
	/* 読み物の測度で絞らないページの幅（意図した仕様）。
	 * 使い先は汎用固定ページ（page.php）の本文ブロックとタイトル行、
	 * それにニュース詳細（news-page.css の .tiptop-news-detail）。
	 * これは読み物の測度ではなく**置き場所の幅**。上2つと違って1行の文字数から
	 * 決めた値ではないので、測度トークン（上2つ）と混ぜて使わないこと。
	 * 器はサイト幅（--tiptop-site-width）で、CSS既定は1040pxだが**管理画面で変えられる**
	 * （inc/enqueue.php が :root へ実値を差し込む。ローカル検証環境は1440pxだった）。
	 * つまり器と本文の余白差は案件ごとに変わる。min() にしてあるのは、サイト幅を
	 * 1000px未満へ絞った案件ではみ出さないようにするため。 */
	--tt-page-content-width: min(1000px, 100%);
}