/* ==========================================================================
   軟糖代購 - base.css
   Design tokens + reset + typography + utilities
   Palette: client architecture doc Figure 4 (近似色) with AA contrast variants
   ========================================================================== */

:root {
  /* ---- Color: surfaces & text ---- */
  --bg: #F7DFD3;            /* 暖桃 頁面底 */
  --bg-soft: #FBF1EA;       /* lighter wash */
  --bg-deep: #F2D4C5;       /* deeper peach (page headers) */
  --surface: #FFFFFF;       /* cards */
  --surface-2: #FDF7F2;     /* subtle fill */
  --surface-3: #FAF0E8;     /* deeper subtle fill */
  --ink: #3C3C43;           /* main text 10.9:1 */
  --ink-2: #5B5B63;         /* secondary text (AA on page bg + lavender) */
  --ink-3: #92929A;         /* tertiary / meta (large only) */
  --line: #EEE5DE;          /* hairline on white */
  --line-2: #E7D9CF;        /* hairline on peach */

  /* ---- Color: brand accents ---- */
  --pink: #E2C4C6;          /* 霧粉 */
  --pink-soft: #F6E8EA;
  --pink-deep: #B98B90;     /* pink for large decoration only */
  --lavender: #AFAFC9;      /* 淡紫 */
  --lavender-soft: #EAEAF4;
  --lavender-deep: #7E7EA0; /* lavender deep for large text/icons */
  --blue: #5F7DAF;          /* 柔和藍 (large text / icons / non-text UI) */
  --blue-strong: #4F6A9B;   /* buttons + small links 5.4:1 */
  --blue-deep: #42597F;     /* pressed / hover-deep */
  --blue-soft: #E9EDF5;
  --red: #B23E2A;           /* 現貨/預購 red + errors (AA on red tint) */
  --red-soft: #FAE8E3;
  --field-border: #8F8FA8;  /* interactive control boundary (≥3:1 on white) */
  --amber: #8A6116;         /* status: received */
  --amber-soft: #F7ECD9;
  --green: #0A7D36;         /* status: shipped / success */
  --green-soft: #E6F5EC;
  --line-green: #06C755;    /* LINE brand (icons only) */
  --focus: #4F6A9B;

  /* ---- Type ---- */
  --font-sans: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Heiti TC", "Hiragino Sans CNS", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px;
  --fs-17: 17px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-32: 32px;

  /* ---- Space (4pt rhythm) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-14: 56px; --sp-18: 72px;

  /* ---- Shape & depth (locked system) ---- */
  --r-card: 16px; --r-ctl: 12px; --r-input: 12px; --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(96, 63, 52, .05), 0 10px 26px -14px rgba(96, 63, 52, .18);
  --shadow-pop: 0 18px 44px -12px rgba(76, 54, 45, .28);
  --shadow-bar: 0 -8px 28px -16px rgba(96, 63, 52, .30);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .22s;

  /* ---- Layers ---- */
  --z-header: 20; --z-bottombar: 30; --z-drawer: 60; --z-sheet: 70;
  --z-modal: 80; --z-toast: 90; --z-skip: 120;

  /* ---- Layout ---- */
  --wrap: 1080px; --wrap-admin: 1160px;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: var(--blue-strong); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
table { border-collapse: collapse; width: 100%; }
fieldset { border: 0; margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html { height: 100%; }
body {
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}
body.no-scroll { overflow: hidden; }

::selection { background: var(--lavender-soft); color: var(--ink); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

/* scrollbars: quiet */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: var(--z-skip);
  padding: 10px 14px; border-radius: 10px;
  background: var(--surface); color: var(--blue-deep);
  box-shadow: var(--shadow-pop); font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* --------------------------------------------------------------------------
   Typography helpers
   -------------------------------------------------------------------------- */
.h1 { font-size: var(--fs-24); font-weight: 600; line-height: 1.3; letter-spacing: .01em; }
.h2 { font-size: var(--fs-20); font-weight: 600; line-height: 1.35; }
.h3 { font-size: var(--fs-17); font-weight: 600; line-height: 1.4; }
.h4 { font-size: var(--fs-15); font-weight: 600; line-height: 1.45; }
.t-small { font-size: var(--fs-13); }
.t-caption { font-size: var(--fs-12); }
.t-muted { color: var(--ink-2); }
.t-faint { color: var(--ink-3); }
.t-blue { color: var(--blue-strong); }
.t-red { color: var(--red); }
.t-green { color: var(--green); }
.t-bold { font-weight: 600; }
.tnum { font-variant-numeric: tabular-nums; }
.money { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .01em; }

.clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.clamp-3 {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Layout utilities
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-4); }
.container-wide { width: 100%; max-width: var(--wrap-admin); margin-inline: auto; padding-inline: var(--sp-4); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.row-top { display: flex; align-items: flex-start; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); } .gap-5 { gap: var(--sp-5); } .gap-6 { gap: var(--sp-6); }
.grow { flex: 1 1 auto; min-width: 0; }
.wrap { flex-wrap: wrap; }
.center { justify-content: center; }
.between { justify-content: space-between; }
.end { justify-content: flex-end; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); } .mt-10 { margin-top: var(--sp-10); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); } .mb-6 { margin-bottom: var(--sp-6); }

.visually-hidden, .sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }
.hr-2 { border: 0; border-top: 1px solid var(--line-2); margin: var(--sp-5) 0; }

/* --------------------------------------------------------------------------
   Motion prefs
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* --------------------------------------------------------------------------
   Print (order receipt courtesy)
   -------------------------------------------------------------------------- */
@media print {
  body { background: #fff; }
  .appbar, .bottom-bar, .drawer, .toast-root, .tabbar { display: none !important; }
}