/* REV HAUT CLINIC Image Server - Design Tokens
 * 正規仕様: DESIGN.md §2 (カラー) / §3 (タイポ) / §4 (スペーシング) / §7 (アニメ)
 * 全 HTML / Vue は本ファイルの値に従う。直接の色リテラル禁止 (var(--*) 経由のみ)。
 */

:root {
  /* ── ライトテーマ palette ─────────────────────── */
  --bg: #FAF8F5;                 /* warm off-white */
  --surface: #FFFFFF;            /* card / panel background */
  --surface-2: #F5F1EB;          /* subtle warm tint (inputs / disabled rows / chips) */
  --border: #EAE5DD;             /* light beige-gray */
  --border-active: #B8927A;      /* focus border = accent */
  --text: #2F2A26;               /* warm charcoal (WCAG AA on bg) */
  --text-dim: #6B635C;           /* secondary text */
  --text-muted: #9E948B;         /* tertiary meta text */
  --accent: #B8927A;             /* rose beige */
  --accent-dark: #9B7763;        /* hover/active */
  --accent-light: #F5EDE5;       /* light bg for accent chips */
  --accent-glow: rgba(184, 146, 122, 0.18);
  --green: #7AA88A;              /* muted sage */
  --green-glow: rgba(122, 168, 138, 0.15);
  --red: #C75A5A;                /* muted brick red */
  --red-glow: rgba(199, 90, 90, 0.12);
  --orange: #C9985A;             /* warm gold */
  --on-accent: #2F2A26;          /* text on accent (AA: 6.1:1) */
  --modal-backdrop: rgba(0, 0, 0, 0.40);
  --tab-badge-bg: rgba(0, 0, 0, 0.18);

  /* ── レイアウト寸法 (Block 11A.5) ────────────────────
   * モーダル overlay はサイドバーの右側だけを覆い、サイドバーは常に
   * クリック可能な状態を維持する。モバイル幅では sidebar が hide なので 0 にする。
   */
  --sidebar-w: 240px;

  /* ── タイポグラフィ ─────────────────────────────── */
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', monospace;
  --sans: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── レイアウト ─────────────────────────────── */
  --radius: 8px;
  --shadow-sm: 0 1px 3px rgba(60, 50, 40, 0.06);
  --shadow-md: 0 4px 12px rgba(60, 50, 40, 0.08);
  --shadow-lg: 0 8px 24px rgba(60, 50, 40, 0.10);

  color-scheme: light;
}

/* ── base reset ─────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* DESIGN.md §7.2: ページロードトランジション全ページ統一 */
  animation: pageEnter 0.18s ease-out;
  /* theme 切替時のフェード (data-theme 変更時に滑らかに) */
  transition: background 0.25s ease, color 0.25s ease;
}

a { color: var(--accent); }

/* ── 共通アニメーション (DESIGN.md §7) ─────────── */
@keyframes pageEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cardJustUpdated {
  0%   { box-shadow: 0 0 0 2px var(--accent-glow), var(--shadow-md); }
  100% { box-shadow: 0 0 0 0 transparent, var(--shadow-sm); }
}

@keyframes cardRemoving {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.96); }
}

/* ── focus-visible リング (DESIGN.md §9.2) ─────── */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* ── Vue v-cloak: mount 前のフラッシュ抑止 ───── */
[v-cloak] { display: none; }

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