/*
Theme Name: TypeCompass
Theme URI: https://type-compass.daisen.life
Author: DAISEN TypeCompass事業部
Author URI: https://daisen.life
Description: ユング心理学的類型論に基づく16タイプ診断×コンディションパルス統合型 人材・組織開発ソリューション「TypeCompass」のための、WordPressオリジナルテーマ。CMSではなくアプリケーション基盤としてWordPressを活用し、実名／匿名混在サーベイ、7カテゴリースコア分析、多言語対応、堅牢なセキュリティを備えたSaaS型HRアプリケーションを実現します。
Version: 0.3.0
Requires at least: 6.4
Requires PHP: 8.1
Tested up to: 6.6
License: Proprietary
License URI: https://daisen.life/license
Text Domain: type-compass
Domain Path: /languages
Tags: hr-tech, custom-theme, application-framework, jungian-typology

TypeCompass Theme — Base Stylesheet
------------------------------------
このファイルはテーマ宣言と、全ページ共通の「構造」を定義する базе layer です。
色調方針（深いブルー×パープル×無彩色）のうち、ここでは情報構造・可読性・
UIのミニマル性を支える「無彩色（グレー・ホワイト）」をベースとして定義し、
ブランドカラー（深いブルー／パープル）はCSSカスタムプロパティとしてのみ
宣言します。実際の作り込み（フロントページの世界観演出、診断画面の
インタラクション等）は assets/css/ 配下の各専用スタイルシートが担います。

このstyle.cssが担う責務：
  1. WordPressテーマ宣言（上記ヘッダーコメント）
  2. デザイントークン（CSS変数）の一元管理
  3. リセット／ノーマライズ
  4. タイポグラフィの基礎
  5. レイアウトユーティリティ（コンテナ、グリッド、間隔）
  6. アクセシビリティの基礎（フォーカスリング、コントラスト、reduced-motion）
  7. WordPress標準クラスへの最低限の対応（alignwide, alignfull, screen-reader-text 等）
*/

/* ==========================================================================
   1. デザイントークン（CSS Custom Properties）
   「深いブルー（知性・深度・信頼）× パープル（洞察・精神性）× 無彩色（構造・透明性）」
   の8色パレット原則に基づく一元管理。各テンプレート/アセットは必ずこの変数を参照する。
   ========================================================================== */
:root {

  /* --- ブランドカラー：深いブルー系（Ni＝内向直観の象徴。静けさ・知性・深度） --- */
  --tc-color-navy-900: #0a1628;   /* ミッドナイトブルー：最深部、ヘッダー/フッター基調 */
  --tc-color-navy-800: #0f2242;   /* ディープブルー：主要背景 */
  --tc-color-navy-700: #16305c;   /* ベースブルー：セクション背景 */
  --tc-color-navy-500: #2c4c8c;   /* ミッドブルー：ボーダー、セカンダリボタン */
  --tc-color-navy-300: #6b8bc4;   /* ライトブルー：リンク、補助テキスト（濃色背景上） */

  /* --- アクセントカラー：パープル系（洞察・精神性・直観の象徴） --- */
  --tc-color-purple-700: #4a3a7a; /* ディープパープル：強調背景 */
  --tc-color-purple-500: #6d54a8; /* コアパープル：CTAボタン、強調テキスト、図形ハイライト */
  --tc-color-purple-300: #a690d6; /* ライトパープル：ホバー、微細な強調 */
  --tc-color-purple-100: #ece6f7; /* パープルティント：淡い背景、バッジ */

  /* --- 無彩色（グレー・ホワイト）：情報構造・可読性・透明性を担保 --- */
  --tc-color-white:      #ffffff;
  --tc-color-gray-050:   #f7f8fa;  /* ページ背景（薄グレー） */
  --tc-color-gray-100:   #eef0f3;  /* カード背景、区切り */
  --tc-color-gray-200:   #dde1e7;  /* ボーダー */
  --tc-color-gray-400:   #9aa3b2;  /* プレースホルダ、無効状態 */
  --tc-color-gray-600:   #5c6577;  /* 補助テキスト */
  --tc-color-gray-800:   #2b3140;  /* 本文テキスト */
  --tc-color-gray-900:   #14161c;  /* 見出しテキスト */

  /* --- 4グループ テーマカラー（第4層／TypeCompass独自の実務的整理。
         ダッシュボードやフィードバック画面等、限定的な用途でのみ使用し、
         サイト全体のブランドカラー（ブルー×パープル）とは分離する） --- */
  --tc-group-genba-drive:      #c94f4f; /* 🔴 現場ドライブ */
  --tc-group-kenjitsu-process: #8a5a3c; /* 🟤 堅実プロセス */
  --tc-group-ikusei-partner:   #d6a636; /* 🟡 育成パートナー */
  --tc-group-senryaku-design:  #3d6fbf; /* 🔵 戦略デザイン */

  /* --- セマンティックカラー --- */
  --tc-color-success: #2f8f5b;
  --tc-color-warning: #c78a1f;
  --tc-color-danger:  #c94f4f;
  --tc-color-info:    var(--tc-color-navy-500);

  /* --- タイポグラフィ --- */
  --tc-font-serif: "Noto Serif JP", "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --tc-font-sans:  "Noto Sans JP", "Inter", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --tc-font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --tc-fs-xs:   0.75rem;
  --tc-fs-sm:   0.875rem;
  --tc-fs-base: 1rem;
  --tc-fs-md:   1.125rem;
  --tc-fs-lg:   1.375rem;
  --tc-fs-xl:   1.75rem;
  --tc-fs-2xl:  2.25rem;
  --tc-fs-3xl:  3rem;

  --tc-lh-tight: 1.35;
  --tc-lh-base:  1.75;

  /* --- 間隔（8pxベース） --- */
  --tc-space-1: 0.5rem;
  --tc-space-2: 1rem;
  --tc-space-3: 1.5rem;
  --tc-space-4: 2rem;
  --tc-space-5: 3rem;
  --tc-space-6: 4rem;
  --tc-space-7: 6rem;

  /* --- レイアウト --- */
  --tc-container-max: 1200px;
  --tc-container-narrow: 800px;
  --tc-radius-sm: 6px;
  --tc-radius-md: 12px;
  --tc-radius-lg: 20px;
  --tc-radius-full: 999px;

  /* --- 影（浮遊感・階層。深いブルーを基調にした低彩度シャドウ） --- */
  --tc-shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.06);
  --tc-shadow-md: 0 4px 16px rgba(10, 22, 40, 0.08);
  --tc-shadow-lg: 0 12px 40px rgba(10, 22, 40, 0.14);

  /* --- トランジション --- */
  --tc-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tc-duration-fast: 150ms;
  --tc-duration-base: 250ms;
  --tc-duration-slow: 500ms;

  /* --- z-index スケール --- */
  --tc-z-header: 100;
  --tc-z-modal: 1000;
  --tc-z-toast: 1100;
}

/* ==========================================================================
   2. リセット／ノーマライズ
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--tc-color-gray-050);
  color: var(--tc-color-gray-800);
  font-family: var(--tc-font-sans);
  font-size: var(--tc-fs-base);
  line-height: var(--tc-lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; }

a { color: var(--tc-color-navy-500); text-decoration: none; }
a:hover { color: var(--tc-color-purple-500); }

ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

table { border-collapse: collapse; width: 100%; }

/* ==========================================================================
   3. タイポグラフィ基礎
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--tc-space-2);
  color: var(--tc-color-gray-900);
  font-family: var(--tc-font-serif);
  font-weight: 700;
  line-height: var(--tc-lh-tight);
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, var(--tc-fs-3xl)); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, var(--tc-fs-2xl)); }
h3 { font-size: var(--tc-fs-xl); }
h4 { font-size: var(--tc-fs-lg); }

p { margin: 0 0 var(--tc-space-2); }

.tc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--tc-fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tc-color-purple-500);
}

.tc-lead {
  font-size: var(--tc-fs-md);
  color: var(--tc-color-gray-600);
}

/* ==========================================================================
   4. レイアウトユーティリティ
   ========================================================================== */
.tc-container {
  width: 100%;
  max-width: var(--tc-container-max);
  margin-inline: auto;
  padding-inline: var(--tc-space-3);
}

.tc-container--narrow { max-width: var(--tc-container-narrow); }

.tc-section { padding-block: var(--tc-space-6); }
.tc-section--tight { padding-block: var(--tc-space-4); }

.tc-stack > * + * { margin-top: var(--tc-space-2); }

.tc-grid {
  display: grid;
  gap: var(--tc-space-3);
}

@media (min-width: 768px) {
  .tc-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .tc-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .tc-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.tc-card {
  background: var(--tc-color-white);
  border: 1px solid var(--tc-color-gray-200);
  border-radius: var(--tc-radius-md);
  box-shadow: var(--tc-shadow-sm);
  padding: var(--tc-space-3);
}

/* ==========================================================================
   5. 汎用コンポーネント（基礎のみ。詳細装飾は各アセットCSSに委譲）
   ========================================================================== */
.tc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 1.75em;
  border: 1px solid transparent;
  border-radius: var(--tc-radius-full);
  font-weight: 600;
  font-size: var(--tc-fs-sm);
  transition: background-color var(--tc-duration-base) var(--tc-ease),
              color var(--tc-duration-base) var(--tc-ease),
              transform var(--tc-duration-fast) var(--tc-ease),
              box-shadow var(--tc-duration-base) var(--tc-ease);
}

.tc-btn:active { transform: translateY(1px); }

.tc-btn--primary {
  background: linear-gradient(135deg, var(--tc-color-purple-500), var(--tc-color-navy-700));
  color: var(--tc-color-white);
  box-shadow: var(--tc-shadow-md);
}
.tc-btn--primary:hover { color: var(--tc-color-white); box-shadow: var(--tc-shadow-lg); }

.tc-btn--outline {
  background: transparent;
  border-color: var(--tc-color-navy-500);
  color: var(--tc-color-navy-700);
}
.tc-btn--outline:hover { background: var(--tc-color-navy-900); color: var(--tc-color-white); }

.tc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25em 0.85em;
  border-radius: var(--tc-radius-full);
  font-size: var(--tc-fs-xs);
  font-weight: 600;
  background: var(--tc-color-purple-100);
  color: var(--tc-color-purple-700);
}

/* グループ別バッジ（第4層：ダッシュボード等での識別用途に限定） */
.tc-badge--genba-drive      { background: color-mix(in srgb, var(--tc-group-genba-drive) 14%, white);      color: var(--tc-group-genba-drive); }
.tc-badge--kenjitsu-process { background: color-mix(in srgb, var(--tc-group-kenjitsu-process) 14%, white); color: var(--tc-group-kenjitsu-process); }
.tc-badge--ikusei-partner   { background: color-mix(in srgb, var(--tc-group-ikusei-partner) 16%, white);   color: var(--tc-group-ikusei-partner); }
.tc-badge--senryaku-design  { background: color-mix(in srgb, var(--tc-group-senryaku-design) 14%, white);  color: var(--tc-group-senryaku-design); }

/* ==========================================================================
   6. アクセシビリティ
   ========================================================================== */
:focus-visible {
  outline: 3px solid var(--tc-color-purple-300);
  outline-offset: 2px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.tc-skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 9999;
  background: var(--tc-color-navy-900);
  color: var(--tc-color-white);
  padding: var(--tc-space-1) var(--tc-space-2);
  border-radius: 0 0 var(--tc-radius-sm) 0;
}
.tc-skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   7. WordPress標準クラスへの最低限の対応
   ========================================================================== */
.alignwide { max-width: calc(var(--tc-container-max) + 4rem); margin-inline: auto; }
.alignfull { max-width: none; width: 100%; }
.aligncenter { display: block; margin-inline: auto; }
.alignleft { float: left; margin-right: var(--tc-space-2); }
.alignright { float: right; margin-left: var(--tc-space-2); }

.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: var(--tc-fs-sm); color: var(--tc-color-gray-600); }

/* 管理画面ツールバーがある場合のヘッダー位置補正 */
body.admin-bar .tc-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .tc-header { top: 46px; }
}