/**
 * Design Tokens
 * ブランドコンセプト「枠を超えて未来を描く。」に基づく設計。
 * - Paperベースの明るい紙面 + 差し色1色（アクセントは装飾ではなく合図として最小限に使用）
 * - 角丸は基本的に使わない（全要素角丸化はMASTER_SPEC第4項で明示的に禁止）
 * - border-frame系トークンは「枠」のブランド演出に使う専用線
 */

:root {
	/* Color: base */
	--color-paper: #faf8f3;
	--color-surface: #ffffff;
	--color-ink: #17181c;
	--color-ink-soft: #5b5d63;
	/* PHASE18: 元は#9b9c9f（paper比コントラスト比2.59、WCAG AA未達）。#6b6d72に調整し4.88に改善 */
	--color-ink-faint: #6b6d72;
	--color-line: #e3e0d6;

	/* Color: accent（サイト全体で使用箇所を絞る。グラデーションにしない）
	   クライアント提供のブランドロゴ（シアン〜ティールのグラデーション鳥マーク）から抽出。
	   明るいシアン単体はpaper比1.89でWCAG AA未達のため、
	   文字・ボタン等の機能用途には抽出した濃色ティール（4.74）を採用し、
	   ロゴ本来の鮮やかなシアンは装飾用途（--color-accent-bright）に限定して使う。 */
	--color-accent: #0b7a8c;
	--color-accent-bright: #14c8e8;
	--color-accent-ink: #ffffff;
	--color-accent-soft: #e3f6fa;

	/* Color: semantic */
	--color-bg: var(--color-paper);
	--color-text: var(--color-ink);
	--color-text-muted: var(--color-ink-soft);
	--color-border: var(--color-line);
	--color-focus: var(--color-accent);

	/* Typography: font stacks */
	--font-display: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
	--font-body: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
	--font-mono: ui-monospace, "SFMono-Regular", "Consolas", "Menlo", monospace;
	/* ユーザー指示（2026-09-16）：「上質な和文明朝×モダンな英字」統一のため導入。FV・ABOUTの
	   メインコピー（大見出し）専用。本文・UI・英字装飾は引き続き--font-display/--font-body
	   （ゴシック）を使う（「メインコピー＝明朝、説明・UI＝ゴシック」というルール）。
	   Google Fonts（Noto Serif JP）はinc/enqueue.phpで読み込む。日本語Webフォント未対応・
	   読み込み前の環境ではShippori Mincho→Yu Mincho→Hiragino Mincho ProN→系OS標準明朝へ
	   フォールバックする。 */
	--font-serif: "Noto Serif JP", "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;

	/* ユーザー指示（2026-09-17、「HEADERロゴデザイン提案」02案採用）：LIBREワードマーク専用。
	   --font-serif（Noto Serif JP＝和文明朝）はラテン文字のフォールバックとして使うと
	   ストローク強弱が和文明朝寄りの癖のある字形になり、「Web制作会社として成立する上品な
	   セリフ体」の要件に合わない。英字ロゴタイプ専用にEB Garamondを別途導入する
	   （Google Fontsはinc/enqueue.phpで読み込み）。 */
	--font-logo: "EB Garamond", "Noto Serif JP", serif;

	/* Typography: fluid scale */
	--fs-eyebrow: clamp(0.6875rem, 0.65rem + 0.2vw, 0.75rem);
	--fs-body: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
	--fs-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
	--fs-h3: clamp(1.375rem, 1.2rem + 1vw, 1.75rem);
	--fs-h2: clamp(1.75rem, 1.4rem + 2vw, 2.5rem);
	--fs-h1: clamp(2.25rem, 1.6rem + 3.5vw, 3.5rem);
	--fs-display: clamp(2.75rem, 1.8rem + 5.5vw, 6rem);

	--ls-tight: -0.02em;
	--ls-normal: 0em;
	--ls-wide: 0.08em;

	--lh-tight: 1.1;
	--lh-snug: 1.3;
	--lh-normal: 1.5;
	--lh-relaxed: 1.8;

	/* Spacing（4pxベース） */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;
	--space-10: 8rem;
	--space-11: 12rem;

	/* Radius（意図的に控えめ。カード類の全面角丸はしない） */
	--radius-0: 0;
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-pill: 999px;

	/* Border */
	--border-hairline: 1px solid var(--color-border);
	--border-frame-width: 1.5px;
	--border-frame: var(--border-frame-width) solid var(--color-ink);

	/* Motion */
	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--duration-fast: 150ms;
	--duration-base: 300ms;
	--duration-slow: 600ms;

	/* Z-index */
	--z-base: 0;
	--z-sticky: 10;
	--z-header: 100;
	--z-overlay: 500;
	--z-modal: 600;
	--z-loading: 900;
	--z-toast: 950;

	/* Layout */
	--bp-tablet: 768px;
	--bp-desktop: 1024px;
	--container-max: 1280px;
	--container-pad: clamp(1.25rem, 4vw, 3rem);

	/* Typography: massive scale（PHASE3, MASTER_SPEC_V2）
	   CREATE/GROWの巨大タイポグラフィ「01 CREATE」「02 GROW」、ABOUTの折り重なる大文字コピー、
	   CONTACTの背景ウォーターマークなど、既存--fs-display（最大6rem）を超える「画面を覆う」用途専用。
	   本文には使わない。 */
	--fs-massive: clamp(3.5rem, 1.5rem + 11vw, 12rem);

	/* Color: Ver.2 Section Palette（PHASE3, MASTER_SPEC_V2第6-7項）
	   TOPページのみで使用するセクション別配色。下層ページは対象外で、上のColor: base/accent/semantic
	   （WCAG AA実測済み）をそのまま使い続ける（MASTER_SPEC_V2第41項：TOP以外はTOPと同じ演出量を持ち込まない）。
	   各bg/ink組はWCAG AA（4.5:1以上）を満たすことを確認済み（下記コメントに実測値）。
	   --v2-section-bgはPHASE5以降、Scroll Progressに応じてtransitions.js（JS）がscene背景と同期して
	   上書きするランタイム変数。ここでのデフォルト値はJS未実行時（no-JS/初期ペイント）のフォールバック。 */
	--v2-color-intro-bg: #0b1626;      /* Deep Navy */
	--v2-color-intro-ink: #f5f7fa;      /* 16.91:1 */
	--v2-color-intro-accent: #14c8e8;   /* Cyan（既存--color-accent-brightと共通） 9.04:1 */

	--v2-color-fv-start: #0c2a52;       /* Deep Blue（fv-prototype.php等が引き続き参照するため値は変更しない） */
	--v2-color-fv-end: #bfe6f5;         /* Sky Blue（同上） */
	--v2-color-fv-ink-on-dark: #f5f7fa; /* fv-start比 13.32:1 */
	--v2-color-fv-ink-on-light: #0f2438; /* fv-end比 11.92:1 */

	/* Ver.2 PHASE31-A：新FV「BEYOND THE FRAME.」専用トークン。旧--v2-color-fv-start/endは
	   Prototypeページ（fv-prototype.php等）が引き続き参照しているため値を変更せず、
	   新FV用にこちらを新規追加する（front-page.php/css/jsの本番FVのみが参照）。 */
	--v2-color-fv2-bg-top: #050a14;
	--v2-color-fv2-bg-mid: #030812;
	--v2-color-fv2-bg-bottom: #02050b;
	--v2-color-fv2-ink: #f5f7fa;        /* fv2-bg-top比 18.8:1 */
	--v2-color-fv2-accent: #22d3ee;     /* prism SVGの中間色（シアン〜ブルー）と共通 */
	--v2-color-fv2-lime: #d9f99d;       /* FRAME.のドット・Aプリズムのアクセント */

	--v2-color-about-bg: #faf3df;       /* Cream（現在は未使用。将来ABOUTを明るいトーンへ戻す場合の予備） */
	--v2-color-about-accent: #f2c94c;   /* Yellow（星空に添える暖色のglow用アクセントとして継続使用） */
	--v2-color-about-ink: var(--color-ink); /* about-bg比 16.01:1（現在は未使用。上と同様の予備） */
	/* ユーザーFB「Aboutまで、夜空にする」を受け、FVの終盤と同じ夜空トーンをABOUTでも維持する
	   （旧--v2-color-about-sunsetは本方針により廃止、PHASE17後の再修正） */
	--v2-color-about-night: var(--v2-color-fv-start);
	--v2-color-about-ink-on-dark: var(--v2-color-fv-ink-on-dark); /* about-night比 13.32:1（fv-startと同色のため同じ比） */

	/* Ver.5 ABOUT（ユーザー指示 2026-09-16）：about-world.webp（縦長）を使った明るい昼の世界へ
	   全面刷新。上のabout-night/about-bg等は旧デザイン（Prototypeページ・styleguideが引き続き
	   参照）のため値を変更せず、新ABOUTの終端色（about-world.webp下端の雲海トーン、
	   about.css側の.about-worldのbackground-colorフォールバックと同じ値）としてこちらを
	   新規追加する。front-page.js側のCREATE入場カラートランジション（entranceFrom）が参照する。 */
	--v2-color-about-end: #a9b7d6;

	--v2-color-create-bg: #123a73;      /* Blue（Serviceパネル右側メディアの背景として使用） */
	--v2-color-create-accent: #14c8e8;  /* Cyan（intro-accentと共通トークンを再利用） */
	--v2-color-create-ink: #f5f7fa;     /* create-bg比 10.42:1 */

	--v2-color-grow-bg: #145c3a;        /* Green（Serviceパネル右側メディアの背景として使用） */
	--v2-color-grow-accent: #7be0a8;
	--v2-color-grow-ink: #f5f7fa;       /* grow-bg比 7.46:1 */

	/* LIG（liginc.co.jp）参考のService Panel（CREATE/GROW共通）左側・全体の下地色（PHASE17後追加）。
	   ダークニュートラルはグループ差し色（create-accent/grow-accent）を問わず共通で使う。 */
	--v2-color-service-panel-dark: #1f2124;
	--v2-color-service-panel-ink: #f5f7fa; /* panel-dark比 15.1:1 */

	--v2-color-works-bg: var(--color-paper);  /* White / Light。プロジェクト個別色はWorksデータ側で管理 */
	--v2-color-works-ink: var(--color-ink);

	--v2-color-blog-bg: #eef5fb;        /* Pale Blue */
	--v2-color-blog-ink: var(--color-ink); /* blog-bg比 16.12:1 */

	--v2-color-contact-bg: #071022;     /* Deep Blue / Night Sky */
	--v2-color-contact-accent: #14c8e8;
	--v2-color-contact-ink: #f5f7fa;    /* contact-bg比 17.69:1 */

	/* ランタイムでtransitions.jsが上書きする、現在のScroll Progressに対応する世界の色（PHASE5で接続） */
	--v2-section-bg: var(--v2-color-intro-bg);

	/* ============================== TOPタイポグラフィ統一（2026-09-19） ==============================
	   ABOUT/SERVICE/WORKS/BLOG/CONTACTで微妙にバラバラだった英字ラベル・日本語見出し・本文の
	   フォントサイズと文字色を、役割ごとの3タイプ（TYPE A：ABOUT/SERVICE＝説明する章、
	   TYPE B：WORKS/BLOG＝見せる章、TYPE C：CONTACT＝CTA）へ整理するための共通値。
	   font-familyは既存の--font-serif（日本語明朝／英字ロゴ以外のセリフ）・--font-display・
	   --font-body（どちらも同じ和文ゴシックスタック）をそのまま使い、新しいWebフォントは
	   追加しない。--libre-color-navyは各セクションでバラバラだった見出し濃紺
	   （#0f2438/#12335c/#082d4a/#0b3453等）を統合したもの。 */
	--libre-color-navy: #082d4a;

	--libre-label-size: clamp(13px, 1vw, 16px);
	--libre-heading-size: clamp(42px, 3.6vw, 68px);
	--libre-gallery-title-size: clamp(44px, 4vw, 72px);
	--libre-body-size: clamp(16px, 1.1vw, 18px);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 0ms;
		--duration-base: 0ms;
		--duration-slow: 0ms;
	}
}