/* ============================================================
 * tokens.css ─ design-tokens.json から生成された CSS変数
 *
 * このファイルは design/design-tokens.json の単一情報源を反映。
 *
 * 【方針 v4 ─ 2026-06-01 トップ継承版】
 * クールホワイトの紙地＋チャコール＋ブランドティール＋コッパー。
 * 設計事務所/美術館パンフレットの静謐・精緻・編集的トーンを保ちつつ、抜けと先進感を優先。
 * - 背景：クールホワイト #FAF9F7（澄んだ紙地）
 * - 文字：チャコール #1C1F23
 * - 主役：ティール #067B7B（資産・維持）
 * - 差し色：コッパー #C9885F（CTA・ワンポイント）
 * - 見出し＝明朝（Shippori Mincho）／本文＝ゴシック（Zen Kaku Gothic New）の書体コントラスト
 * - glow（ネオン発光）は中立化、過剰グラデ/3D/多重シャドウは排除、罫線主体へ
 *
 * 【重要】CSS変数名は一切変更しない（全ページが参照中）。値のみ更新。
 *         新概念（コーナーブラケット/グリッド線）は新規変数で追加。
 * ============================================================ */

:root {
	/* ─── Background（クールホワイト基盤：澄んだ紙地へ変更） ─── */
	--color-bg-primary:   #FAF9F7;  /* クールホワイト（メイン背景＝紙地） */
	--color-bg-surface:   #FFFFFF;  /* 純白（カード面） */
	--color-bg-elevated:  #EAF3F1;  /* 淡アクアグレー（ホバー・強調面） */
	--color-bg-base:      #FFFFFF;  /* 紙地に浮かせる面・チップ・白ボタン用 */

	/* ─── Background（ダーク強調セクション用） ─── */
	--color-bg-dark-primary:  #0A1414;
	--color-bg-dark-surface:  #14201F;
	--color-bg-dark-elevated: #1E2D2C;

	/* ─── Text（紙地上） ─── */
	--color-text-primary:   #1C1F23;  /* チャコール（ブランドガイド） */
	--color-text-secondary: #4A4E54;  /* チャコール寄りグレー（キャプション） */
	--color-text-muted:     #7C8186;  /* ライトグレー（注釈） */
	--color-text-on-brand:  #FFFFFF;  /* ブランド色背景上 */
	--color-text-on-accent: #FFFFFF;  /* アクセント背景上 */

	/* ─── Text（ダーク強調セクション上） ─── */
	--color-text-dark-primary:   #F4FAF9;  /* ダーク背景上の本文（アクア寄りの白） */
	--color-text-dark-secondary: #B8C4C2;
	--color-text-dark-muted:     #6B7878;

	/* ─── Brand（コレットラボ メインカラー：継続） ─── */
	--color-brand:     #067B7B;
	--color-brand-100: #D9EFEF;
	--color-brand-300: #5BAEAE;
	--color-brand-500: #067B7B;
	--color-brand-700: #054F4F;
	--color-brand-900: #022F2F;

	/* ─── Accent: Copper（差し色／CTA・温度感／ブランドガイド正式採用） ───
	   旧テラコッタ #C8654A はコッパーの不正確版だったため #C9885F に統一。
	   文字色用途では 18px+/bold か白文字ボタン運用に限定（コントラスト確保）。 */
	--color-accent:     #C9885F;
	--color-accent-100: #F3E6DA;
	--color-accent-300: #DDB293;
	--color-accent-500: #C9885F;
	--color-accent-700: #9E6743;  /* 紙地上で文字に使える濃さ（AA確保） */
	--color-accent-900: #5E3D27;

	/* ─── Sub-Accent: Intelligence (AX領域・ハイライト) ───
	   旧ブライトシアン #14D4D4 はIT系の安っぽさのため廃止し、ブランドティールへ寄せる。 */
	--color-intelligence:     #067B7B;
	--color-intelligence-100: #D9EFEF;
	--color-intelligence-300: #5BAEAE;
	--color-intelligence-500: #067B7B;
	--color-intelligence-700: #054F4F;
	--color-intelligence-900: #022F2F;

	/* ─── Sub-Accent: Empathy (人の温度・event・小装飾に限定) ───
	   原色コーラルピンクは紙地に浮くため不可。彩度を落とした「くすみコーラル」で再導入し、
	   コッパー単色の均質化を解消する（2026-06-02）。面では使わず点・ラベル・流線に限定。 */
	--color-empathy:     #D98A7A;
	--color-empathy-100: #F7E7E2;
	--color-empathy-300: #E5A99B;
	--color-empathy-500: #D98A7A;
	--color-empathy-700: #A65142;  /* 紙地上で文字に使える濃さ（白地コントラスト約5.9：AA確保） */
	--color-empathy-900: #5C2E26;

	/* ─── Sub-Accent: Action (成果数値・CTA脇の強調) ───
	   原色アンバーはポップすぎるため不可。彩度を落とした「くすみアンバー」で再導入し、
	   数字の一撃を取り戻す（2026-06-02）。主CTAは --color-brand / --color-accent のまま。 */
	--color-action:     #D99A4E;
	--color-action-100: #F7ECD7;
	--color-action-300: #E6C188;
	--color-action-500: #D99A4E;
	--color-action-700: #8C6420;  /* 紙地上で文字に使える濃さ（白地コントラスト約5.0：AA確保） */
	--color-action-900: #4F3914;

	/* ─── 参照されているが従来未定義だったエイリアス（壊れ参照の修復） ───
	   既存CSSが var(--color-accent-intelligence/empathy/action) を参照しているため、
	   名称を変えずに定義を補う。CLAUDE.md のトークン命名（intent ベース）とも整合。 */
	--color-accent-intelligence: var(--color-intelligence);
	--color-accent-empathy:      var(--color-empathy);
	--color-accent-action:       var(--color-action);

	/* ─── Border（紙地上・チャコール低不透明度の細い実線で構造を作る） ─── */
	--color-border-subtle:  rgba(28, 31, 35, 0.10);
	--color-border-default: rgba(28, 31, 35, 0.18);
	--color-border-strong:  rgba(28, 31, 35, 0.30);
	--color-border-brand:   rgba(6, 123, 123, 0.45);
	--color-border-accent:  rgba(201, 136, 95, 0.45);

	/* ─── Border（ダーク強調セクション上） ─── */
	--color-border-dark-subtle:  rgba(255, 255, 255, 0.08);
	--color-border-dark-default: rgba(255, 255, 255, 0.14);
	--color-border-dark-strong:  rgba(255, 255, 255, 0.24);

	/* ─── Glass（半透明面） ─── */
	--color-glass-subtle:  rgba(28, 31, 35, 0.03);
	--color-glass-default: rgba(28, 31, 35, 0.05);
	--color-glass-strong:  rgba(28, 31, 35, 0.09);
	--color-glass-brand:   rgba(6, 123, 123, 0.06);
	--color-glass-accent:  rgba(201, 136, 95, 0.07);

	/* ─── Decor（編集的装飾・新規追加） ───
	   ブランドガイドのコーナーブラケット／建築図面的グリッド線／細罫線用。
	   既存変数は触らず、新概念として追加。 */
	--color-decor-bracket:   #067B7B;                /* 四隅L字マーカーの線色（ティール） */
	--color-decor-grid:      rgba(28, 31, 35, 0.08); /* 建築図面的グリッド線 */
	--color-decor-hairline:  rgba(28, 31, 35, 0.22); /* 編集的な細罫線 */
	--bracket-size:          14px;                   /* コーナーブラケットの一辺長 */
	--bracket-thickness:     1.5px;                  /* コーナーブラケットの線幅 */
	--bracket-inset:         10px;                   /* 角からのオフセット */

	/* ダーク強調セクション用 glass */
	--color-glass-dark-subtle:  rgba(255, 255, 255, 0.04);
	--color-glass-dark-default: rgba(255, 255, 255, 0.06);
	--color-glass-dark-brand:   rgba(91, 174, 174, 0.10);

	/* ─── Typography: Font Family（明朝見出し × ゴシック本文の書体コントラスト） ───
	   本文/UI＝ゴシック（Zen Kaku Gothic New：SP80%でも細らず可読）
	   見出し和文＝明朝（Shippori Mincho：游明朝に近い端正さ・知性と品格）
	   見出し欧文/英ラベル＝セリフ（Playfair Display：ハイコントラスト）
	   ラベル/数値＝等幅（JetBrains Mono） */
	--font-sans-jp:     "Zen Kaku Gothic New", "Helvetica Neue", Arial, sans-serif;
	--font-sans-latin:  "Zen Kaku Gothic New", "Helvetica Neue", Arial, sans-serif;
	--font-serif-jp:    "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
	--font-serif-latin: "Playfair Display", Georgia, "Times New Roman", serif;
	--font-mono:        "JetBrains Mono", "SF Mono", Consolas, monospace;
	/* 既存CSS（LP等）が参照する --font-en は従来未定義だった。英ラベル用セリフへ束ねる。 */
	--font-en:          var(--font-serif-latin);

	/* ─── Typography: Font Size ─── */
	--fs-xs:   0.75rem;
	--fs-sm:   0.875rem;
	--fs-base: 1rem;
	--fs-md:   1.0625rem;  /* 17px ─ 本文標準（投稿記事の段落） */
	--fs-lg:   1.125rem;
	--fs-xl:   1.25rem;
	--fs-2xl:  1.5rem;
	--fs-3xl:  1.875rem;
	--fs-4xl:  2.25rem;
	--fs-5xl:  3rem;
	--fs-6xl:  3.75rem;
	--fs-7xl:  4.5rem;
	--fs-8xl:  6rem;
	--fs-display-lg: clamp(2.5rem, 6.5vw, 5.5rem);
	--fs-display-md: clamp(2rem, 5vw, 4.5rem);

	/* ─── Typography: Line Height ─── */
	--lh-tight:   1.15;
	--lh-snug:    1.35;
	--lh-normal:  1.55;
	--lh-relaxed: 1.7;
	--lh-loose:   1.85;

	/* ─── Typography: Letter Spacing
	     Zen Kaku Gothic New と Nunito Sans の字面を活かし、過度に詰めない */
	--ls-tighter: -0.02em;
	--ls-tight:   -0.01em;
	--ls-normal:  0;
	--ls-wide:    0.02em;
	--ls-wider:   0.05em;
	--ls-widest:  0.1em;

	/* ─── Typography: Font Weight ─── */
	--fw-regular:   400;
	--fw-medium:    500;
	--fw-semibold:  600;
	--fw-bold:      700;
	--fw-extrabold: 800;
	--fw-black:     900;

	/* ─── Spacing (8pxベース) ─── */
	--space-1:  0.25rem;  /*   4px */
	--space-2:  0.5rem;   /*   8px */
	--space-3:  0.75rem;  /*  12px */
	--space-4:  1rem;     /*  16px */
	--space-5:  1.5rem;   /*  24px */
	--space-6:  2rem;     /*  32px */
	--space-7:  3rem;     /*  48px */
	--space-8:  4rem;     /*  64px */
	--space-9:  6rem;     /*  96px */
	--space-10: 8rem;     /* 128px */
	--space-11: 12rem;    /* 192px */

	/* ─── Border Radius（編集的なエッジ：角を縮小して立てる） ─── */
	--radius-none: 0;
	--radius-sm:   0.125rem;  /*  2px */
	--radius-md:   0.375rem;  /*  6px */
	--radius-lg:   0.5rem;    /*  8px ─ 主要面の標準（旧18px→8px） */
	--radius-xl:   0.75rem;   /* 12px */
	--radius-2xl:  1rem;      /* 16px */
	--radius-full: 9999px;    /* ピル・真円用途のみ */

	/* ─── Shadow（控えめ・罫線主体。チャコール低不透明度の浅い影） ─── */
	--shadow-sm: 0 1px 2px 0 rgba(28, 31, 35, 0.05);
	--shadow-md: 0 2px 8px -2px rgba(28, 31, 35, 0.07);
	--shadow-lg: 0 6px 20px -8px rgba(28, 31, 35, 0.10);
	--shadow-xl: 0 12px 32px -12px rgba(28, 31, 35, 0.12);
	/* glow系：ブランドガイドNG（IT系の安っぽさ）のため中立化。変数名は後方互換で維持。 */
	--shadow-glow-brand:  0 1px 2px 0 rgba(28, 31, 35, 0.06);
	--shadow-glow-accent: 0 1px 2px 0 rgba(28, 31, 35, 0.06);
	--shadow-inner-subtle: inset 0 1px 0 0 rgba(255, 255, 255, 0.5);

	/* ─── Blur ─── */
	--blur-sm: 8px;
	--blur-md: 16px;
	--blur-lg: 32px;

	/* ─── Motion: Duration ─── */
	--duration-instant: 100ms;
	--duration-fast:    200ms;
	--duration-base:    300ms;
	--duration-slow:    600ms;
	--duration-slowest: 1200ms;

	/* ─── Motion: Easing ─── */
	--ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
	--ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);

	/* ─── Layout ─── */
	--container-narrow:  720px;
	--container-default: 1200px;
	--container-wide:    1440px;
	--section-py-mobile:  4rem;
	--section-py-desktop: 8rem;
	--header-height:      64px;  /* site-header__inner height（fixed） */

	/* ─── z-index ─── */
	--z-behind:   -1;
	--z-base:     0;
	--z-raised:   10;
	--z-dropdown: 100;
	--z-sticky:   200;
	--z-header:   500;
	--z-overlay:  800;
	--z-modal:    900;
	--z-toast:    1000;
}