/*
 * 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; /* 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-vitamin-yellow: #FFD700; /* Gold */
    --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 */

    /* 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) */
    --kamos-font-size-h1: 2.5rem;
    --kamos-font-size-h2: 2rem;
    --kamos-font-size-h3: 1.5rem;
    --kamos-font-size-body: 1rem;
    --kamos-font-size-lg: 1.125rem;
    --kamos-font-size-small: 0.875rem;
    --kamos-font-size-xs: 0.75rem;

    /* 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;

    /* アニメーションするグラデーションの基本色 (ライトモード) */
    --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;
}

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

/*
 * 入力フィールドのデフォルトのフォントを継承させ、一貫性を保ちます。
 */
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 {
    background-color: var(--kamos-bg-color-body-login);
    color: var(--kamos-text-color-inverted);
    /* ログインページでは背景グラデーションを適用しない (noneを維持) */
    background-image: none;
    display: flex; /* Add display: flex */
    flex-direction: column; /* Ensure content stacks vertically */
    justify-content: space-between; /* Push footer to bottom, center content */
    align-items: center; /* Horizontally center content */
    height:auto;
    overflow-x: hidden;
    flex-flow: wrap;
    flex-grow:1
}

/*
 * 見出しの基本的なスタイル設定
 */
h1, h2, h3, h4, h5, h6 {
    margin-top: var(--kamos-space-xl);
    margin-bottom: var(--kamos-space-md);
    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: var(--kamos-font-weight-bold); /* 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;
}