/* ============================================================
   園藝期刊 RAG 系統 — 設計系統
   植物綠系 · 溫暖學術 · 細膩動效
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700;900&family=Noto+Serif+TC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* — 植物綠主色階 (oklch) — */
  --green-900: oklch(0.27 0.05 152);
  --green-800: oklch(0.34 0.07 152);
  --green-700: oklch(0.42 0.09 151);
  --green-600: oklch(0.50 0.105 150);
  --green-500: oklch(0.58 0.115 148);
  --green-400: oklch(0.68 0.12 142);
  --green-300: oklch(0.80 0.10 138);
  --green-200: oklch(0.89 0.06 140);
  --green-100: oklch(0.945 0.032 142);
  --green-50:  oklch(0.975 0.016 140);

  /* — 主色語意 (可被 tweak 覆寫 hue) — */
  --accent-hue: 150;
  --accent: oklch(0.50 0.105 var(--accent-hue));
  --accent-deep: oklch(0.38 0.085 var(--accent-hue));
  --accent-bright: oklch(0.70 0.135 calc(var(--accent-hue) - 12));
  --accent-soft: oklch(0.945 0.032 var(--accent-hue));
  --accent-tint: oklch(0.965 0.018 var(--accent-hue));

  /* — 暖中性 — */
  --bg: oklch(0.982 0.008 110);
  --bg-sunken: oklch(0.962 0.010 120);
  --surface: oklch(0.998 0.003 110);
  --surface-2: oklch(0.984 0.007 120);
  --ink: oklch(0.26 0.018 152);
  --ink-2: oklch(0.42 0.018 150);
  --ink-3: oklch(0.56 0.016 148);
  --ink-faint: oklch(0.70 0.014 145);
  --line: oklch(0.90 0.012 135);
  --line-2: oklch(0.835 0.018 138);

  /* — 狀態色 — */
  --ok: oklch(0.58 0.115 150);
  --warn: oklch(0.74 0.13 75);
  --lock: oklch(0.62 0.045 30);
  --danger: oklch(0.58 0.16 28);
  --info: oklch(0.60 0.10 230);

  /* — 排版 — */
  --font-ui: 'Noto Sans TC', system-ui, sans-serif;
  --font-serif: 'Noto Serif TC', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --fs-root: 15px;

  /* — 形狀 / 陰影 — */
  --r-sm: 7px;
  --r: 11px;
  --r-lg: 16px;
  --r-xl: 22px;
  --shadow-1: 0 1px 2px oklch(0.30 0.04 150 / 0.06), 0 1px 1px oklch(0.30 0.04 150 / 0.04);
  --shadow-2: 0 4px 14px oklch(0.30 0.05 150 / 0.08), 0 1px 3px oklch(0.30 0.04 150 / 0.06);
  --shadow-3: 0 18px 48px oklch(0.30 0.06 150 / 0.14), 0 4px 12px oklch(0.30 0.05 150 / 0.08);
  --shadow-glow: 0 0 0 4px var(--accent-soft);

  /* — 密度 (可被 tweak 覆寫) — */
  --pad: 22px;
  --gap: 16px;
  --row-h: 46px;
}

/* 深色模式 */
[data-theme="dark"] {
  --bg: oklch(0.22 0.014 152);
  --bg-sunken: oklch(0.18 0.012 152);
  --surface: oklch(0.255 0.016 152);
  --surface-2: oklch(0.295 0.018 150);
  --ink: oklch(0.94 0.012 130);
  --ink-2: oklch(0.80 0.014 135);
  --ink-3: oklch(0.66 0.016 140);
  --ink-faint: oklch(0.54 0.016 145);
  --line: oklch(0.36 0.018 150);
  --line-2: oklch(0.44 0.022 148);
  --accent-soft: oklch(0.34 0.05 var(--accent-hue));
  --accent-tint: oklch(0.29 0.03 var(--accent-hue));
  --accent: oklch(0.62 0.12 var(--accent-hue));
  --accent-deep: oklch(0.74 0.13 var(--accent-hue));
  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.30);
  --shadow-2: 0 4px 14px oklch(0 0 0 / 0.36);
  --shadow-3: 0 18px 48px oklch(0 0 0 / 0.5);
}

/* 密度 */
[data-density="compact"] { --pad: 15px; --gap: 11px; --row-h: 40px; --fs-root: 14px; }
[data-density="comfy"]   { --pad: 28px; --gap: 21px; --row-h: 52px; --fs-root: 16px; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-root);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow: hidden; }

::selection { background: var(--accent-bright); color: #fff; }

#root { height: 100vh; }

/* — 捲軸 — */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; color: inherit; }
.mono { font-family: var(--font-mono); font-feature-settings: 'tnum'; }
.serif { font-family: var(--font-serif); }

/* ============================================================
   按鈕變體
   ============================================================ */
.btn-primary {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 130%);
  color: #fff;
  box-shadow: var(--shadow-1), inset 0 1px 0 oklch(1 0 0 / 0.18);
}
.btn-primary:hover:not(:disabled) {
  box-shadow: var(--shadow-2), inset 0 1px 0 oklch(1 0 0 / 0.22);
  filter: brightness(1.06);
}
.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--line-2);
  box-shadow: var(--shadow-1);
}
.btn-secondary:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-tint); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { background: var(--accent-tint); color: var(--accent-deep); }
.btn-soft { background: var(--accent-tint); color: var(--accent-deep); border: 1px solid var(--accent-soft); }
.btn-soft:hover:not(:disabled) { background: var(--accent-soft); }
.btn-danger { background: var(--surface); color: var(--danger); border: 1.5px solid oklch(0.87 0.07 28); }
.btn-danger:hover:not(:disabled) { background: oklch(0.96 0.04 28); border-color: var(--danger); }
.btn-dark { background: var(--green-900); color: var(--green-100); box-shadow: var(--shadow-2); }
.btn-dark:hover:not(:disabled) { filter: brightness(1.12); }

/* ============================================================
   動效關鍵影格
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes growVine {
  from { stroke-dashoffset: var(--len); }
  to { stroke-dashoffset: 0; }
}
@keyframes leafUnfurl {
  0% { transform: scale(0) rotate(-30deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(6deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes flowDot {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 var(--accent-soft); }
  70% { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes barPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@keyframes sway {
  0%, 100% { transform: rotate(-2.5deg); }
  50% { transform: rotate(2.5deg); }
}
@keyframes countUp { from { opacity: 0.3; } to { opacity: 1; } }
@keyframes slideRail {
  from { transform: translateX(-8px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.anim-fade-up { opacity: 1; }
.anim-scale-in { opacity: 1; }
.anim-fade-in { opacity: 1; }
html.anim-on .anim-fade-up { animation: fadeUp 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
html.anim-on .anim-scale-in { animation: scaleIn 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
html.anim-on .anim-fade-in { animation: fadeIn 0.4s ease both; }
html.anim-on .tab-pane { animation: fadeIn 0.3s ease both; }

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

.stagger > * { animation: none; }
html.anim-on .stagger > * { animation: fadeUp 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
html.anim-on .stagger > *:nth-child(1) { animation-delay: 0.02s; }
html.anim-on .stagger > *:nth-child(2) { animation-delay: 0.07s; }
html.anim-on .stagger > *:nth-child(3) { animation-delay: 0.12s; }
html.anim-on .stagger > *:nth-child(4) { animation-delay: 0.17s; }
html.anim-on .stagger > *:nth-child(5) { animation-delay: 0.22s; }
html.anim-on .stagger > *:nth-child(6) { animation-delay: 0.27s; }
html.anim-on .stagger > *:nth-child(7) { animation-delay: 0.32s; }
html.anim-on .stagger > *:nth-child(8) { animation-delay: 0.37s; }

/* 內聯動效的閘控版本（時間軸未啟動時保持可見） */
.leaf-unfurl, .toast-in, .rail-in { opacity: 1; }
html.anim-on .leaf-unfurl { animation: leafUnfurl 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
html.anim-on .toast-in { animation: fadeUp 0.3s ease both; }
html.anim-on .rail-in { animation: slideRail 0.3s ease both; }

/* 載入骨架微光 */
.shimmer {
  background: linear-gradient(100deg, var(--surface-2) 30%, var(--accent-tint) 50%, var(--surface-2) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}