/*
 * public/css/base.css
 *
 * このファイルには、Kamos Design System のグローバルな基本スタイルを定義します。
 * - Google Fonts for Material Symbols のインポート
 * - Kamos デザインシステムに基づいたCSSカスタムプロパパティ（変数）定義
 * - ブラウザのデフォルトスタイルリセット
 * - 基本的なタイポグラフィ（フォント、テキストサイズなど）
 * - 全体的なbody/htmlスタイル、および特定のページ（ログインページ）のbodyスタイル
 *
 * Vue.js移行時も、アプリケーション全体に適用される基盤となるスタイルとして維持されます。
 */

/* ==========================================================================
   0. Global Imports
   ========================================================================== */
/* Google Fonts for Material Symbols */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&display=swap');

/* ==========================================================================
   1. CSSカスタムプロパティ（変数）定義 - Kamos Design Tokens
   ========================================================================== */
/* kamos-design-system-light.json の :root 定義を優先し、主要な変数を定義 */
:root {
  /* Colors */
  --kamos-primary-color: #10B981;
  --kamos-primary-color-rgb: 16 185 129;
  /* Tailwind green-500 */
  --kamos-primary-darker: #059669;
  /* Tailwind green-700 */
  --kamos-primary-darkest: #047857;
  /* Tailwind green-800 */
  --kamos-secondary-color: #4A5568;
  /* Tailwind gray-600 */
  --kamos-accent-blue: #3B82F6;
  /* Tailwind blue-500 */
  --kamos-accent-blue-rgb: 59, 130, 246;
  /* RGB for blue-500 */
  --kamos-accent-purple: #8B5CF6;
  /* Tailwind purple-500 */
  --kamos-accent-purple-rgb: 139, 92, 246;
  /* RGB for purple-500 */
  --kamos-accent-amber: #F59E0B;
  /* Tailwind amber-500 */
  --kamos-accent-amber-rgb: 245, 158, 11;
  /* RGB for amber-500 */
  --kamos-vitamin-yellow: #FFD700;
  /* Gold */
  --kamos-vitamin-yellow-hover: #FACC15;
  /* Tailwind yellow-400 */
  --kamos-vitamin-pink: #FF1493;
  /* DeepPink */
  --kamos-vitamin-orange: #FFA500;
  /* Orange */
  /* Kamos Designographyで定義された淡いラベンダー色 */
  --kamos-pale-lavender: #F0E6FA;

  --kamos-text-color-default: #333333;
  --kamos-text-color-light: #6B7280;
  --kamos-text-color-inverted: #FFFFFF;
  --kamos-text-color-error: #EF4444;
  --kamos-text-color-success: #065F46;
  --kamos-text-color-warning: #D97706;
  --kamos-text-color-info: #0E7490;

  /* --- RGBカラー変数の追加 (RGBA使用のため) --- */
  --kamos-primary-color-rgb: 16, 185, 129;
  /* For #10B981 */
  --kamos-text-color-default-rgb: 51, 51, 51;
  /* For #333333 */
  --kamos-text-color-inverted-rgb: 255, 255, 255;
  /* For #FFFFFF */


  /* --- 背景の奥行き感を調整 --- */
  --kamos-bg-color-body: #FFFFFF;
  /* Kamos Homeの基調色として淡いラベンダー色を適用 */
  --kamos-bg-color-body-login: #10B980;
  /* ログインページ専用の背景色 */
  --kamos-bg-color-container-light: #FAFAFA;
  /* ★変更: セクション層をさらに薄いグレーに設定 */
  --kamos-bg-color-container-dark-alpha: rgba(0, 0, 0, 0.1);
  --kamos-bg-color-overlay: rgba(0, 0, 0, 0.7);
  --kamos-bg-color-overlay-light: rgba(255, 255, 255, 0.95);
  --kamos-bg-color-input: #FFFFFF;
  /* 手前のUI層: 純粋な白を維持 */
  --kamos-bg-color-table-header: #4A5568;
  --kamos-bg-color-table-row-even: var(--kamos-bg-color-container-light);
  --kamos-bg-color-edited-cell: #FFFBEB;
  /* Tailwind yellow-50 */
  --kamos-bg-color-reference-url-section: #F0FDF4;
  /* Tailwind green-50 */
  --kamos-bg-color-chat-panel: #F0FDF4;
  /* Light green for chat panel */

  /* Border */
  --kamos-border-color-default: #D1D5DB;
  --kamos-border-color-light: #E5E7EB;
  --kamos-border-color-focus: var(--kamos-primary-color);
  --kamos-border-color-error: var(--kamos-text-color-error);
  --kamos-border-color-edited-cell: #FBBF24;
  /* Tailwind yellow-400 */
  --kamos-border-color-reference-url-section: #BBF7D0;
  /* Tailwind green-200 */

  /* Typography */
  --kamos-font-family-base: 'Josefin Sans', 'Noto Sans JP', sans-serif;
  --kamos-font-family-english: 'Josefin Sans', sans-serif;
  --kamos-font-family-japanese: 'Noto Sans JP', sans-serif;
  --kamos-line-height-base: 1.6;

  /* Font Sizes (rem based on 16px root) - Bumped for readability */
  --kamos-font-size-h1: 3rem;
  /* 48px */
  --kamos-font-size-h2: 2.25rem;
  /* 36px */
  --kamos-font-size-h3: 1.75rem;
  /* 28px */
  --kamos-font-size-body: 1.125rem;
  /* 18px */
  --kamos-font-size-lg: 1.25rem;
  /* 20px */
  --kamos-font-size-small: 1rem;
  /* 16px */
  --kamos-font-size-xs: 0.875rem;
  /* 14px */

  /* Spacing (rem based on 16px root) */
  --kamos-space-xs: 0.25rem;
  /* 4px */
  --kamos-space-sm: 0.5rem;
  /* 8px */
  --kamos-space-md: 1rem;
  /* 16px */
  --kamos-space-lg: 1.5rem;
  /* 24px */
  --kamos-space-xl: 2rem;
  /* 32px */
  --kamos-space-2xl: 2.5rem;
  /* 40px */
  --kamos-space-3xl: 3rem;
  /* 48px */

  /* Border Radius */
  --kamos-border-radius-sm: 4px;
  --kamos-border-radius-md: 6px;
  --kamos-border-radius-lg: 8px;

  /* Shadows */
  --kamos-box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --kamos-box-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --kamos-box-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.12);
  --kamos-box-shadow-focus: 0 0 0 3px rgba(16, 185, 129, 0.3);
  --kamos-box-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);

  /* Transitions */
  --kamos-transition-duration-short: 0.2s;
  --kamos-transition-duration-medium: 0.3s;
  --kamos-transition-duration-long: 0.4s;
  --kamos-transition-timing-function-kamos-organic-bounce: cubic-bezier(0.4, 0, 0.2, 1.2);
  --kamos-transition-timing-function-kamos-ease-out: ease-out;
  /* Material Expressive 3 Easings */
  --kamos-ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --kamos-ease-emphasized-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);

  /* Z-Index Scale - Systematic layer management */
  --kamos-z-base: 1;
  --kamos-z-dropdown: 1000;
  --kamos-z-sticky: 1020;
  --kamos-z-fixed: 1030;
  --kamos-z-modal-backdrop: 1040;
  --kamos-z-modal: 1050;
  --kamos-z-popover: 1060;
  --kamos-z-toast: 1070;
  --kamos-z-tooltip: 1080;

  /* アニメーションするグラデーションの基本色 (ライトモード) */
  --gradient-color-1: rgba(16, 185, 129, 0.2);
  /* Kamos Primary Green - やや透過 */
  --gradient-color-2: rgba(255, 215, 0, 0.35);
  /* Kamos Vitamin Yellow - より透過度を上げて明るく */
  --gradient-color-3: rgba(59, 130, 246, 0.2);
  /* Kamos Accent Blue - やや透過 */
  --gradient-color-4: rgba(255, 20, 147, 0.25);
  /* Kamos Vitamin Pink - より透過度を上げて明るく */
}

/* ==========================================================================
   2. ブラウザのデフォルトスタイルリセット (Minimal Reset)
   ========================================================================== */
/*
 * ボックスサイジングをborder-boxに設定し、要素のpaddingとborderがwidth/heightに含まれるようにします。
 * これにより、レイアウトの計算が直感的になり、より予測可能になります。
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
 * デフォルトのマージンとパディングを削除し、一貫した基盤を提供します。
 * 各要素は明示的にスタイルを定義する必要があります。
 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
dl,
dd,
ol,
ul,
figure,
figcaption,
hr,
fieldset,
legend,
table,
th,
td,
caption,
input,
button,
textarea,
select {
  margin: 0;
  padding: 0;
}

/*
 * リストアイテムのデフォルトのスタイル（箇条書き記号など）を削除します。
 */
ol,
ul {
  list-style: none;
}

/*
 * リンクのテキスト装飾をデフォルトで削除し、スタイルをより細かく制御できるようにします。
 */
a {
  color: var(--kamos-primary-color);
  text-decoration: none;
  transition: color var(--kamos-transition-duration-short) var(--kamos-transition-timing-function-kamos-ease-out);
}

a:hover {
  color: var(--kamos-primary-darker);
  text-decoration: underline;
}

/* ==========================================================================
   Focus States - Unified focus styling for accessibility
   ========================================================================== */
/*
 * すべてのインタラクティブ要素に統一されたフォーカススタイルを適用します。
 * キーボードナビゲーションのアクセシビリティを向上させます。
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
[contenteditable]:focus-visible {
  outline: none;
  box-shadow: var(--kamos-box-shadow-focus);
  border-radius: var(--kamos-border-radius-sm);
}

/* マウスクリックでのフォーカス時は強調表示しない（:focus-visible使用） */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/*
 * 画像が親要素のサイズを超えないようにし、レスポンシブな画像表示を可能にします。
 */
img,
picture,
video,
canvas,
svg {
  display: block;
  /* 不要な余白を削除 */
  max-width: 100%;
}

/*
 * 入力フィールドのデフォルトのフォントを継承させ、一貫性を保ちます。
 */
input,
button,
textarea,
select {
  font: inherit;
}

/*
 * 行の高さがline-heightの倍数になるように設定し、テキストの垂直方向の配置を改善します。
 */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}


/* ==========================================================================
   3. 基本的なタイポグラフィと全体スタイル
   ========================================================================== */
html {
  font-size: 16px;
  /* Base for rem calculations */
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  /* フォントのアンチエイリアシング */
  -moz-osx-font-smoothing: grayscale;
  /* フォントのアンチエイリアシング (Firefox) */
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--kamos-font-family-base);
  line-height: var(--kamos-line-height-base);
  color: var(--kamos-text-color-default);
  background-color: var(--kamos-bg-color-body);
  /* 淡いラベンダー色を適用 */
  /* radial-gradient はJavaScriptのcanvasで描画するため削除 */
  background-image: none;
  transition: background-color var(--kamos-transition-duration-medium) ease-in-out,
    color var(--kamos-transition-duration-medium) ease-in-out;
  min-height: 100vh;
  /* 画面全体の高さを確保 */
  display: flex;
  /* Flexbox を有効化 */
  flex-direction: column;
  /* 要素を縦方向に並べる */
}

/* Login Page specific body styles (global body modifier) */
body.login-page {
  color: var(--kamos-text-color-inverted);
  /* ログインページでは背景グラデーションを適用しない (noneを維持) */
  background-image: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* space-betweenから変更 */
  align-items: center;
  min-height: 100vh;
  /* height:autoから変更 */
  overflow-x: hidden;
  overflow-y: auto;
  /* 縦方向のスクロールを許可 */
  /* flex-flow と flex-grow を削除 */
}

/*
 * 見出しの基本的なスタイル設定
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  /* SemiBold as base */
  line-height: 1.3;
  font-family: var(--kamos-font-family-english);
  /* Headings in Josefin Sans */
}

h1 {
  font-size: var(--kamos-font-size-h1);
  font-weight: 700;
  /* Bold for H1 */
}

h2 {
  font-size: var(--kamos-font-size-h2);
  color: var(--kamos-primary-darker);
  /* Darker primary for emphasis */
}

h3 {
  font-size: var(--kamos-font-size-h3);
  color: var(--kamos-text-color-default);
}

h4 {
  font-size: var(--kamos-font-size-body);
  color: var(--kamos-secondary-color);
}

/*
 * 段落の基本的なスタイル設定
 */
p {
  margin-bottom: var(--kamos-space-md);
  font-family: var(--kamos-font-family-japanese);
  font-size: var(--kamos-font-size-body);
  line-height: var(--kamos-line-height-base);
  color: var(--kamos-text-color-default);
}

p.english-text,
.english-text p {
  font-family: var(--kamos-font-family-english);
}

/*
 * リストの基本的なスタイル設定
 */
ul,
ol {
  padding-left: var(--kamos-space-lg);
  margin-bottom: var(--kamos-space-md);
}

li {
  margin-bottom: var(--kamos-space-sm);
}

/*
 * 強調テキストのスタイル
 */
strong,
b {
  font-weight: 700;
}

/*
 * 小さなテキストのスタイル
 */
small {
  font-size: var(--kamos-font-size-small);
  /* 0.875rem */
}

/*
 * 水平線のスタイル
 */
hr {
  border: none;
  border-top: 1px solid var(--kamos-border-color-light);
  margin: var(--kamos-space-lg) 0;
}

/* ==========================================================================
   4. Material Symbols Base Styling
   ========================================================================= */
.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 500,
    /* Slightly bolder */
    'GRAD' 0,
    'opsz' 24;
  /* Adjusted size */
  font-size: 1.5rem;
  /* Equivalent to 24px */
  vertical-align: middle;
  line-height: 1;
  transition: all var(--kamos-transition-duration-short) var(--kamos-transition-timing-function-kamos-organic-bounce);
}


/* ==========================================================================
   5. アクセシビリティとユーザビリティの改善
   ========================================================================= */

/* フォーカスリングのスタイルを改善し、キーボードナビゲーションの視認性を高めます */
:focus-visible {
  outline: none;
  /* デフォルトのoutlineを削除 */
  box-shadow: var(--kamos-box-shadow-focus);
  /* Kamosのフォーカスシャドウを適用 */
  border-radius: var(--kamos-border-radius-sm);
}

/* スクリーンリーダー専用の隠し要素 */
.sr-only,
.kamos-hidden {
  /* kamos-ui.css の .kamos-hidden と統合 */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}