/**
 * FeelFlow Design System
 * 統一的なデザインシステムとコンポーネントスタイル
 */

/* ===========================
   1. CSS変数定義
   =========================== */
:root {
  /* カラーシステム */
  --color-primary: #3b82f6;
  --color-primary-dark: #2563eb;
  --color-primary-light: #60a5fa;
  --color-secondary: #64748b;
  --color-accent: #f59e0b;
  --color-accent-light: #fbbf24;
  --color-success: #10b981;
  --color-error: #ef4444;
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-600: #4b5563;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  
  /* スペーシングシステム（8pxベース） */
  --spacing-xs: 0.5rem;   /* 8px */
  --spacing-sm: 1rem;     /* 16px */
  --spacing-md: 1.5rem;   /* 24px */
  --spacing-lg: 2rem;     /* 32px */
  --spacing-xl: 3rem;     /* 48px */
  --spacing-2xl: 4rem;    /* 64px */
  --spacing-3xl: 6rem;    /* 96px */
  
  /* タイポグラフィスケール */
  --font-xs: 0.75rem;     /* 12px */
  --font-sm: 0.875rem;    /* 14px */
  --font-base: 1rem;      /* 16px */
  --font-lg: 1.125rem;    /* 18px */
  --font-xl: 1.25rem;     /* 20px */
  --font-2xl: 1.5rem;     /* 24px */
  --font-3xl: 1.875rem;   /* 30px */
  --font-4xl: 2.25rem;    /* 36px */
  --font-5xl: 3rem;       /* 48px */
  
  /* 行間 */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* トランジション */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
  
  /* 影 */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  
  /* ボーダー半径 */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;

  /* FeelFlow Accent Token (site-wide). 既存 --color-* と併用 */
  --ff-accent: #ff6b35;
  --ff-accent-strong: #ff8c42;
  --ff-accent-alt: #ffa726;
  --ff-accent-dark: #d94f16;
  --ff-accent-text-on: #ffffff;
}

/* Accent scheme body modifiers (functions.php で付与) */
body.ff-accent-blue {--ff-accent:#2563eb;--ff-accent-strong:#1d4ed8;--ff-accent-alt:#1e40af;--ff-accent-dark:#1d4ed8;}
body.ff-accent-green {--ff-accent:#10b981;--ff-accent-strong:#059669;--ff-accent-alt:#34d399;--ff-accent-dark:#047857;}
body.ff-accent-violet {--ff-accent:#7c3aed;--ff-accent-strong:#6d28d9;--ff-accent-alt:#a78bfa;--ff-accent-dark:#5b21b6;}
body.ff-accent-rose {--ff-accent:#f43f5e;--ff-accent-strong:#e11d48;--ff-accent-alt:#fb7185;--ff-accent-dark:#be123c;}

/* ===========================
   2. レスポンシブブレイクポイント
   =========================== */
@custom-media --mobile (max-width: 767px);
@custom-media --tablet (min-width: 768px) and (max-width: 1023px);
@custom-media --desktop (min-width: 1024px);
@custom-media --wide (min-width: 1280px);

/* ===========================
   3. ボタンコンポーネント
   =========================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-base);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  cursor: pointer;
  border: none;
  outline: none;
  position: relative;
  overflow: hidden;
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ボタンバリエーション */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  background-color: var(--color-gray-100);
  color: var(--color-gray-800);
}

.btn-secondary:hover {
  background-color: var(--color-gray-200);
}

.btn-accent {
  background-color: var(--color-accent);
  color: var(--color-gray-900);
}

.btn-accent:hover {
  background-color: var(--color-accent-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-gray-600);
}

.btn-ghost:hover {
  background-color: var(--color-gray-100);
  color: var(--color-gray-800);
}

/* ボタンサイズ */
.btn-sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-sm);
}

.btn-lg {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-lg);
}

/* ===========================
   3.1 FeelFlow Unified Buttons
   =========================== */
.btn-ff { --_bg: var(--ff-accent); --_bg2: var(--ff-accent-strong); --_text: var(--ff-accent-text-on); --_radius: var(--radius-md); --_shadow: 0 4px 12px -4px color-mix(in srgb,var(--ff-accent) 55%, transparent); position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:14px; line-height:1.1; text-decoration:none; padding:12px 20px; border-radius:var(--_radius); border:1px solid transparent; cursor:pointer; transition:.28s cubic-bezier(.4,0,.2,1); background:var(--_bg); color:var(--_text); box-shadow:var(--_shadow); }
.btn-ff--gradient {background:linear-gradient(90deg,#2563eb,#1d4ed8);color:#ffffff;}
.btn-ff--gradient:hover {background:linear-gradient(90deg,#1d4ed8,#1e40af);color:#ffffff;}
.btn-ff--solid {background:var(--_bg);}
.btn-ff--outline {background:linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg,var(--_bg),var(--_bg2)) border-box; color:var(--_bg); border:1px solid transparent; box-shadow:none;}
.btn-ff--ghost {background:transparent; color:var(--_bg); box-shadow:none;}
.btn-ff--subtle {background:color-mix(in srgb,var(--ff-accent) 10%, #f8fafc); color:var(--ff-accent-dark); border:1px solid color-mix(in srgb,var(--ff-accent) 35%, #e2e8f0);} 
.btn-ff:hover {transform:translateY(-2px); box-shadow:0 8px 20px -6px rgba(37, 99, 235, 0.5);} 
.btn-ff:active {transform:translateY(0); box-shadow:0 3px 8px -3px color-mix(in srgb,var(--ff-accent) 55%, transparent);} 
.btn-ff--outline:hover {background:linear-gradient(90deg,#2563eb,#1d4ed8); color:#ffffff;} 
.btn-ff--ghost:hover {background:color-mix(in srgb,var(--ff-accent) 12%, #ffffff);} 
.btn-ff:focus-visible {outline:3px solid color-mix(in srgb,var(--ff-accent) 55%, #ffffff); outline-offset:2px;} 
.btn-ff--block {width:100%;}
.btn-ff--sm {padding:8px 14px; font-size:12px;}
.btn-ff--lg {padding:16px 28px; font-size:16px;}
.btn-ff .btn-ff__icon {display:inline-flex; align-items:center; font-size:1.1em;}

@media (prefers-reduced-motion:reduce){
  .btn-ff, .btn-ff:hover, .btn-ff:active {transition:none; transform:none;}
}


/* ===========================
   4. カードコンポーネント
   =========================== */
.card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: all var(--transition-base);
}

.card:hover:not(.team-card) {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.card-body {
  padding: var(--spacing-lg);
}

@media (--mobile) {
  .card-body {
    padding: var(--spacing-md);
  }
}

/* ===========================
   5. セクションスペーシング
   =========================== */
.section {
  padding: var(--spacing-3xl) 0;
}

@media (--tablet) {
  .section {
    padding: var(--spacing-2xl) 0;
  }
}

@media (--mobile) {
  .section {
    padding: var(--spacing-xl) 0;
  }
}

/* ===========================
   6. タイポグラフィ
   =========================== */
.heading-1 {
  font-size: var(--font-5xl);
  line-height: var(--line-height-tight);
  font-weight: 300;
}

.heading-2 {
  font-size: var(--font-4xl);
  line-height: var(--line-height-tight);
  font-weight: 300;
}

.heading-3 {
  font-size: var(--font-3xl);
  line-height: var(--line-height-tight);
  font-weight: 400;
}

.heading-4 {
  font-size: var(--font-2xl);
  line-height: var(--line-height-normal);
  font-weight: 500;
}

@media (--mobile) {
  .heading-1 { font-size: var(--font-3xl); }
  .heading-2 { font-size: var(--font-2xl); }
  .heading-3 { font-size: var(--font-xl); }
  .heading-4 { font-size: var(--font-lg); }
}

/* ===========================
   7. グリッドシステム
   =========================== */
.grid-responsive {
  display: grid;
  gap: var(--spacing-lg);
}

@media (--mobile) {
  .grid-responsive {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
}

@media (--tablet) {
  .grid-responsive {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (--desktop) {
  .grid-responsive {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 2カラムグリッド（モバイル対応） */
.grid-2-mobile {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
}

@media (--tablet) {
  .grid-2-mobile {
    gap: var(--spacing-md);
  }
}

@media (--desktop) {
  .grid-2-mobile {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
  }
}

/* ===========================
   8. アニメーション
   =========================== */
@media (prefers-reduced-motion: no-preference) {
  .animate-fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
  }
  
  .animate-fade-up.in-view {
    opacity: 1;
    transform: translateY(0);
  }
  
  .animate-scale {
    transform: scale(0.95);
    opacity: 0;
    transition: transform var(--transition-slow), opacity var(--transition-slow);
  }
  
  .animate-scale.in-view {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===========================
   9. ユーティリティクラス
   =========================== */
.text-gradient {
  background: linear-gradient(to right, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gradient-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}

.bg-gradient-accent {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light));
}

.overlay-dark {
  position: relative;
}

.overlay-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.overlay-dark > * {
  position: relative;
  z-index: 2;
}

/* ===========================
   10. アクセシビリティ
   =========================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.focus-ring:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ===========================
   11. レスポンシブユーティリティ
   =========================== */
@media (--mobile) {
  .mobile\:hidden { display: none; }
  .mobile\:block { display: block; }
}

@media (--tablet) {
  .tablet\:hidden { display: none; }
  .tablet\:block { display: block; }
}

@media (--desktop) {
  .desktop\:hidden { display: none; }
  .desktop\:block { display: block; }
}