/* ═══════════════════════════════════════════════════════════════
   careiti-ui.css — Shared humanised design system for Careiti
   Warm "sunrise" palette · SVG-first (no emoji) · a11y built-in
   Established in reaction.html (2026-06-30), propagated site-wide.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Brand anchor (teal) */
  --c-teal:#0D9488;--c-teal-light:#14B8A6;--c-teal-dark:#0F766E;
  /* Warm sunrise accents */
  --c-amber:#F59E0B;--c-gold:#FBBF24;--c-coral:#FB7185;--c-rose:#E11D48;
  /* Neutrals */
  --c-cream:#FAF8F3;--c-paper:#FFFFFF;
  --c-ink:#1C1917;--c-ink2:#57534E;--c-ink3:#A8A29E;
  --c-line:#ECE9E2;
  --c-good:#16A34A;--c-bad:#EF4444;
  --c-shadow:0 8px 28px rgba(28,25,23,.10);
  --c-radius:22px;
  --c-font:"PingFang HK","Hiragino Sans GB","Microsoft JhengHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ── Base ─────────────────────────────────────────────── */
.c-scope *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
body.c-scope{font-family:var(--c-font);background:var(--c-cream);color:var(--c-ink);min-height:100vh;line-height:1.5;padding-bottom:84px;overflow-x:hidden;}
body.c-scope.large-font{font-size:118%;}

/* soft paper grain — kills the flat "AI gradient" look */
body.c-scope::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(rgba(28,25,23,.022) 1px,transparent 1px);background-size:4px 4px;}
.c-scope .c-wrap{position:relative;z-index:1;max-width:560px;margin:0 auto;}

/* ── Mascot 小亮 (Spark companion) ────────────────────── */
.c-mascot{width:76px;height:76px;flex:none;position:relative;}
.c-mascot svg{width:100%;height:100%;overflow:visible;}
@keyframes c-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}
@keyframes c-cheer{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-15px) scale(1.08)}100%{transform:translateY(0) scale(1)}}
@keyframes c-droop{0%{transform:translateY(0)}100%{transform:translateY(4px) scale(.96)}}
@keyframes c-glow{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.12)}}
.c-mascot .m-body{transform-origin:50% 70%;animation:c-bob 3.2s ease-in-out infinite;}
.c-mascot.happy .m-body{animation:c-cheer .6s ease-out;}
.c-mascot.oops .m-body{animation:c-droop .4s ease forwards;}
.c-mascot .m-halo{transform-origin:center;animation:c-glow 2.6s ease-in-out infinite;}
.c-mascot .m-mouth-smile{display:block;}.c-mascot .m-mouth-big,.c-mascot .m-mouth-flat{display:none;}
.c-mascot.happy .m-mouth-smile{display:none;}.c-mascot.happy .m-mouth-big{display:block;}
.c-mascot.oops .m-mouth-smile{display:none;}.c-mascot.oops .m-mouth-flat{display:block;}

/* ── Cards / buttons ──────────────────────────────────── */
.c-scope .c-card{background:var(--c-paper);border:1.5px solid var(--c-line);border-radius:var(--c-radius);padding:16px;margin-bottom:14px;box-shadow:var(--c-shadow);}
.c-scope .c-section{font-size:11px;font-weight:800;color:var(--c-ink3);margin:2px 4px 10px;letter-spacing:.08em;text-transform:uppercase;}
.c-scope .c-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px;border:none;border-radius:15px;color:#fff;font-size:16px;font-weight:800;cursor:pointer;letter-spacing:.3px;
  background:linear-gradient(135deg,var(--c-amber),var(--c-coral));box-shadow:0 8px 20px rgba(251,113,133,.32);transition:.18s;font-family:var(--c-font);}
.c-scope .c-btn:hover{filter:brightness(1.04);transform:translateY(-1px);}
.c-scope .c-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;}
.c-scope .c-btn svg{width:19px;height:19px;}
.c-scope .c-btn-teal{background:linear-gradient(135deg,var(--c-teal-dark),var(--c-teal-light));box-shadow:0 8px 20px rgba(13,148,136,.3);}
.c-scope .c-btn-ghost{background:var(--c-cream);border:1.5px solid var(--c-line);color:var(--c-ink2);box-shadow:none;}
.c-scope .c-btn-ghost:hover{border-color:var(--c-teal);color:var(--c-teal);}

/* ── Accessibility toolbar (SVG icon buttons) ─────────── */
.c-scope .c-iconbtn{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:13px;
  background:var(--c-paper);border:1.5px solid var(--c-line);color:var(--c-ink2);cursor:pointer;transition:.18s;flex:none;font-weight:900;font-family:var(--c-font);}
.c-scope .c-iconbtn:hover{border-color:var(--c-teal);color:var(--c-teal);}
.c-scope .c-iconbtn.on{background:var(--c-teal);border-color:var(--c-teal);color:#fff;}
.c-scope .c-iconbtn svg{width:20px;height:20px;}

/* ── Bottom nav (SVG, no emoji) ───────────────────────── */
.c-nav{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);
  border-top:1px solid var(--c-line);box-shadow:0 -4px 24px rgba(28,25,23,.06);padding-bottom:env(safe-area-inset-bottom);}
.c-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 7px;text-decoration:none;color:var(--c-ink3);font-size:10px;font-weight:700;}
.c-nav a.active{color:var(--c-teal);}
.c-nav a svg{width:23px;height:23px;}

/* ── Reduced motion + high contrast ───────────────────── */
@media (prefers-reduced-motion: reduce){
  .c-scope *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.05ms !important;}
}
[data-contrast="high"] body.c-scope{background:#000;color:#fff;}
[data-contrast="high"] .c-scope .c-card,[data-contrast="high"] .c-nav{background:#111 !important;border-color:#fff !important;color:#fff;}
[data-contrast="high"] .c-nav a{color:#ccc;}
[data-contrast="high"] .c-nav a.active{color:#FFEB3B;}