/* shared.css — HoiSum 後台 · 設計標記 + 基礎樣式
   每個頁面 <link> 這一個檔。所有 design tokens 都在 :root。
   ====================================================== */
:root{
  --ink:#0B1410;
  --ink-2:#1F2A24;
  --ink-soft:#5C6660;
  --ink-faint:#6B746B;
  --paper:#FAFBFA;
  --paper-2:#F3F4F1;
  --paper-3:#E7EAE5;
  --rule:#E5E7E3;
  --rule-2:#D2D6CF;
  --accent:#1B4231;
  --accent-2:#0F2A21;
  --accent-3:#274D3D;
  --accent-tint:#E8EFEB;
  --accent-tint-2:#F3F7F5;
  --good:#1B7045;
  --good-tint:#D6E9DC;
  --warn:#A65B14;
  --warn-tint:#FFEACB;
  --bad:#9C2E1F;
  --bad-tint:#F7DAD2;
  --info:#1F5FA8;
  --info-tint:#DDE9F5;
  --t1:#1B4231;
  --t2:#5B6E45;
  --t3:#6E5B45;
  --t4:#3B5066;
  --radius:8px;
  --radius-lg:12px;
  --shadow-sm:0 1px 2px rgba(11,20,16,.04);
  --shadow-md:0 1px 2px rgba(11,20,16,.04),0 4px 12px -4px rgba(11,20,16,.06);
  --shadow-lg:0 4px 8px -2px rgba(11,20,16,.06),0 16px 40px -8px rgba(11,20,16,.12);
  --shadow-xl:0 8px 16px -4px rgba(11,20,16,.08),0 24px 60px -12px rgba(11,20,16,.16);
  --t-fast:.12s cubic-bezier(.4,.0,.2,1);
  --t-base:.2s cubic-bezier(.4,.0,.2,1);
  --t-slow:.36s cubic-bezier(.4,.0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);
  font-family:"Inter","Noto Sans TC",-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font-family:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
a{color:inherit;text-decoration:none}
.num{font-feature-settings:"tnum","cv11";font-variant-numeric:tabular-nums}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--rule-2);border:2px solid var(--paper);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--ink-faint)}
kbd{display:inline-block;padding:1px 6px;border-radius:4px;background:var(--paper-2);border:1px solid var(--rule);font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-soft);font-weight:500}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fadeScale{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes slideInRight{from{transform:translateX(20px) scale(.96);opacity:0}60%{transform:translateX(-2px) scale(1.01);opacity:1}to{transform:none;opacity:1}}
@keyframes slideInUp{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:none;opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.5}}
@keyframes ringPulse{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes wave{
  0%,60%,100%{transform:rotate(0deg)}
  10%{transform:rotate(14deg)}
  20%{transform:rotate(-8deg)}
  30%{transform:rotate(14deg)}
  40%{transform:rotate(-4deg)}
  50%{transform:rotate(10deg)}
}
@keyframes growBar{from{transform:scaleX(0);transform-origin:left center}to{transform:scaleX(1);transform-origin:left center}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes arrowSlide{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}

.fade-in{animation:fadeIn .25s var(--t-base) both}
.fade-up{animation:fadeUp .55s var(--ease-out) both}
.fade-scale{animation:fadeScale .4s var(--ease-out) both}
.slide-in-right{animation:slideInRight .42s var(--ease-spring) both}
.slide-in-up{animation:slideInUp .5s var(--ease-out) both}
.spin{animation:spin .8s linear infinite}
.shimmer{background:linear-gradient(90deg,var(--paper-2) 0%,var(--paper-3) 50%,var(--paper-2) 100%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.breathe{animation:breathe 1.8s var(--ease-in-out) infinite}
.wave-hand{display:inline-block;transform-origin:70% 70%;animation:wave 2.6s ease-in-out 1s infinite}
.float-y{animation:floatY 3.6s var(--ease-in-out) infinite}

/* Stagger reveal: parent gets .stagger, children fade-up with index delay via --i */
.stagger>*{animation:fadeUp .55s var(--ease-out) both;animation-delay:calc(var(--i,0) * 60ms + 60ms)}

/* Hover lift utility — for cards / tiles */
.lift{transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base)}
.lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--rule-2)!important}

/* Press feedback */
.press{transition:transform var(--t-fast),background var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.press:active{transform:scale(.97)}

/* Animated chevron — slides right on parent hover */
.chev{display:inline-block;transition:transform var(--t-base);will-change:transform}
*:hover>.chev,*:hover .chev-host{transform:translateX(4px)}

/* Pulse dot (status indicator) */
.dot-pulse{position:relative;display:inline-block}
.dot-pulse::after{content:"";position:absolute;inset:0;border-radius:inherit;background:inherit;
  animation:breathe 1.8s var(--ease-in-out) infinite;z-index:-1}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .wave-hand,.breathe,.float-y,.dot-pulse::after{animation:none!important}
}
::selection{background:var(--accent-tint);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:4px}
button:focus:not(:focus-visible){outline:none}
#root{min-height:100vh}