/* ==========================================================================
   tokens.css — WIWILAB 衛教卡身分（暖米底 #F3EFE6 / 藏青墨 #2C3A4B / 橘 #DE8A3E）
   覆蓋框架 Primer 預設；只改「值」，結構沿用框架。按鈕疊 GKA 彈簧動效。
   ========================================================================== */

:root {
  color-scheme: light dark;

  --bgColor-default: #f3efe6;          /* 暖米底 */
  --bgColor-muted: #ece5d8;
  --bgColor-inset: #e8e0d1;
  --bgColor-neutral-muted: #2c3a4b14;  /* 藏青 8% */
  --bgColor-accent-muted: #fae9d4;     /* 橘的淡暈（peach） */
  --bgColor-success-muted: #e6eedc;
  --bgColor-attention-muted: #faefcf;
  --bgColor-danger-muted: #f6e1db;
  --bgColor-done-muted: #eee6f0;

  --borderColor-default: #ded6c6;
  --borderColor-muted: #ded6c6b3;
  --borderColor-accent-emphasis: #de8a3e; /* 橘 */

  --fgColor-default: #2c3a4b;          /* 藏青墨 */
  --fgColor-muted: #6a7382;
  --fgColor-onEmphasis: #ffffff;
  --fgColor-accent: #b5661e;           /* 可讀的深橘（連結/重點） */
  --fgColor-success: #4a7a3e;
  --fgColor-attention: #9a6b16;
  --fgColor-danger: #b23a2e;
  --fgColor-done: #7a5a8c;

  --shadow-resting-small: 0 1px 0 rgba(44, 58, 75, 0.05);
  --shadow-floating-small: 0 6px 12px -3px rgba(44, 58, 75, 0.14),
    0 6px 18px 0 rgba(44, 58, 75, 0.1);

  --borderRadius-small: 5px;
  --borderRadius-medium: 8px;
  --borderRadius-large: 14px;
  --borderRadius-full: 624rem;

  --base-size-4: 4px;
  --base-size-8: 8px;
  --base-size-12: 12px;
  --base-size-16: 16px;
  --base-size-24: 24px;
  --base-size-32: 32px;
  --base-size-40: 40px;

  --fontStack-sans: -apple-system, BlinkMacSystemFont, "PingFang TC",
    "Microsoft JhengHei", "Noto Sans TC", "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --fontStack-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* GKA 招牌彈簧 easing（動效 = 語義） */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --header-height: 56px;
  --footer-height: 36px;
  --tabnav-height: 0px;
  --stick-top: calc(var(--header-height) + var(--tabnav-height));
  --sidebar-width: 300px;
}

/* 深色主題：暖黑，不走 GitHub 的冷黑 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bgColor-default: #211d18;
    --bgColor-muted: #2b2620;
    --bgColor-inset: #19150f;
    --bgColor-neutral-muted: #efe8db14;
    --bgColor-accent-muted: #e39a5222;
    --bgColor-success-muted: #86c07a22;
    --bgColor-attention-muted: #e0b84e22;
    --bgColor-danger-muted: #e8796b22;
    --bgColor-done-muted: #c3a6d622;

    --borderColor-default: #3d382f;
    --borderColor-muted: #3d382fb3;
    --borderColor-accent-emphasis: #e39a52;

    --fgColor-default: #efe8db;
    --fgColor-muted: #a89c8a;
    --fgColor-accent: #e39a52;
    --fgColor-success: #86c07a;
    --fgColor-attention: #e0b84e;
    --fgColor-danger: #e8796b;
    --fgColor-done: #c3a6d6;

    --shadow-resting-small: 0 1px 0 rgba(0, 0, 0, 0.3);
    --shadow-floating-small: 0 6px 12px -3px rgba(0, 0, 0, 0.35),
      0 6px 18px 0 rgba(0, 0, 0, 0.3);
  }
}

:root[data-theme="dark"] {
  --bgColor-default: #211d18;
  --bgColor-muted: #2b2620;
  --bgColor-inset: #19150f;
  --bgColor-neutral-muted: #efe8db14;
  --bgColor-accent-muted: #e39a5222;
  --bgColor-success-muted: #86c07a22;
  --bgColor-attention-muted: #e0b84e22;
  --bgColor-danger-muted: #e8796b22;
  --bgColor-done-muted: #c3a6d622;

  --borderColor-default: #3d382f;
  --borderColor-muted: #3d382fb3;
  --borderColor-accent-emphasis: #e39a52;

  --fgColor-default: #efe8db;
  --fgColor-muted: #a89c8a;
  --fgColor-accent: #e39a52;
  --fgColor-success: #86c07a;
  --fgColor-attention: #e0b84e;
  --fgColor-danger: #e8796b;
  --fgColor-done: #c3a6d6;

  --shadow-resting-small: 0 1px 0 rgba(0, 0, 0, 0.3);
  --shadow-floating-small: 0 6px 12px -3px rgba(0, 0, 0, 0.35),
    0 6px 18px 0 rgba(0, 0, 0, 0.3);
}

/* --- Reset -------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--stick-top) + var(--base-size-16));
}

body {
  margin: 0;
  padding-bottom: var(--footer-height);
  font-family: var(--fontStack-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fgColor-default);
  background-color: var(--bgColor-default);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: var(--fgColor-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

svg {
  display: block;
  flex-shrink: 0;
}

:focus-visible {
  outline: 2px solid var(--fgColor-accent);
  outline-offset: -1px;
  border-radius: var(--borderRadius-small);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Utility ------------------------------------------------------------ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  margin: 0 auto;
  padding: 0 var(--base-size-24);
}

/* --- Button（疊 GKA 彈簧動效：動效=語義、顏色=階層） -------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--base-size-8);
  padding: 6px 13px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  border: 1px solid var(--borderColor-default);
  border-radius: var(--borderRadius-medium);
  background-color: var(--bgColor-muted);
  color: var(--fgColor-default);
  box-shadow: var(--shadow-resting-small);
  transition: transform 220ms var(--ease-spring),
    background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.2s ease;
  will-change: transform;
}

.btn:hover {
  background-color: var(--bgColor-neutral-muted);
  text-decoration: none;
  transform: scale(1.02);
  box-shadow: var(--shadow-floating-small);
}

.btn:active {
  transform: scale(0.96);
  transition-duration: 100ms;
}

.btn-invisible {
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
  color: var(--fgColor-muted);
}

.btn-invisible:hover {
  background-color: var(--bgColor-neutral-muted);
  color: var(--fgColor-default);
}

.btn-icon {
  padding: 6px;
}

/* --- Label & Counter ---------------------------------------------------- */

.Label {
  display: inline-flex;
  align-items: center;
  gap: var(--base-size-4);
  padding: 0 7px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  border: 1px solid transparent;
  border-radius: var(--borderRadius-full);
  white-space: nowrap;
}

.Label--success {
  color: var(--fgColor-success);
  background-color: var(--bgColor-success-muted);
  border-color: color-mix(in srgb, var(--fgColor-success) 30%, transparent);
}

.Label--neutral {
  color: var(--fgColor-muted);
  background-color: var(--bgColor-neutral-muted);
  border-color: var(--borderColor-muted);
}

.Label--accent {
  color: var(--fgColor-accent);
  background-color: var(--bgColor-accent-muted);
}

.Label--attention {
  color: var(--fgColor-attention);
  background-color: var(--bgColor-attention-muted);
  border-color: color-mix(in srgb, var(--fgColor-attention) 30%, transparent);
}

.Label--danger {
  color: var(--fgColor-danger);
  background-color: var(--bgColor-danger-muted);
  border-color: color-mix(in srgb, var(--fgColor-danger) 30%, transparent);
}

.Label--done {
  color: var(--fgColor-done);
  background-color: var(--bgColor-done-muted);
}

.Counter {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--fgColor-default);
  background-color: var(--bgColor-neutral-muted);
  border: 1px solid var(--borderColor-muted);
  border-radius: var(--borderRadius-full);
}

/* --- Box ---------------------------------------------------------------- */

.Box {
  background-color: var(--bgColor-default);
  border: 1px solid var(--borderColor-default);
  border-radius: var(--borderRadius-medium);
}

.Box__header {
  display: flex;
  align-items: center;
  gap: var(--base-size-8);
  padding: var(--base-size-12) var(--base-size-16);
  background-color: var(--bgColor-muted);
  border-bottom: 1px solid var(--borderColor-default);
  border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;
  font-size: 14px;
  font-weight: 600;
}

.Box__body {
  padding: var(--base-size-16);
}

/* --- Flash -------------------------------------------------------------- */

.Flash {
  display: flex;
  gap: var(--base-size-12);
  padding: var(--base-size-16);
  background-color: var(--bgColor-accent-muted);
  border: 1px solid color-mix(in srgb, var(--fgColor-accent) 30%, transparent);
  border-radius: var(--borderRadius-medium);
  font-size: 13px;
}

.Flash--warn {
  background-color: var(--bgColor-attention-muted);
  border-color: color-mix(in srgb, var(--fgColor-attention) 30%, transparent);
}

.Flash__icon {
  margin-top: 2px;
  color: var(--fgColor-accent);
}

.Flash--warn .Flash__icon {
  color: var(--fgColor-attention);
}

/* --- Blankslate --------------------------------------------------------- */

.Blankslate {
  padding: var(--base-size-40) var(--base-size-16);
  text-align: center;
  color: var(--fgColor-muted);
}

.Blankslate svg {
  margin: 0 auto var(--base-size-12);
  color: var(--fgColor-muted);
}

.Blankslate__heading {
  font-size: 16px;
  font-weight: 600;
  color: var(--fgColor-default);
}

/* --- ProgressBar -------------------------------------------------------- */

.ProgressBar {
  height: 8px;
  overflow: hidden;
  background-color: var(--bgColor-neutral-muted);
  border-radius: var(--borderRadius-full);
}

.ProgressBar__fill {
  height: 100%;
  background-color: var(--fgColor-accent);
  border-radius: var(--borderRadius-full);
  transition: width 0.3s ease;
}

.ProgressBar--thin {
  height: 4px;
}

/* --- Hero 樂透簽名（WIWILAB 吉祥物；白狗配暖米 → 加暖橘柔光浮起來） ------- */
.Hero {
  position: relative !important;
  padding-right: 286px !important;
}
.Hero::before {               /* 樂透貼紙照（比照 GKA：圓角方框 + 墨框 + 橘紅偏移影 + 轉 2°） */
  content: "";
  position: absolute;
  right: 64px;
  top: 50%;
  width: 190px;
  height: 190px;
  transform: translateY(-50%) rotate(2deg);
  background: url("../img/letto-portrait.jpg") no-repeat center / cover;
  border-radius: 24px;
  border: 2.5px solid var(--fgColor-default);
  box-shadow: 6px 6px 0 #c63a1e;
  pointer-events: none;
  z-index: 1;
}
.Hero::after {                /* caption */
  content: "\2014 \6a02\900f \00b7 \99ac\723e\6fdf\65af \00b7 9 \500b\6708";
  position: absolute;
  right: 64px;
  top: calc(50% + 104px);
  width: 190px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--fgColor-muted);
  pointer-events: none;
}
@media (max-width: 900px) {
  .Hero { padding-right: 0 !important; }
  .Hero::before, .Hero::after { display: none; }
}