/* ──────────────────────────────────────────────────────────
   tea.toys · design tokens
   shared with THE TEA constellation · design-system v3.10
   ──────────────────────────────────────────────────────── */

:root {
  /* brand */
  --steep: #3a6b45;
  --steep-ink: #29503a;
  --cream: #f5f1e8;
  --stone: #9a958a;

  /* tea categories */
  --tea-green:  #4a7c59;
  --tea-red:    #8b2500;
  --tea-yellow: #c5a63d;
  --tea-oolong: #b87333;
  --tea-white:  #b0a18c;
  --tea-dark:   #3e2723;
  --tea-puerh:  #4e342e;

  /* project accent · zǐshā clay terracotta · hsl(25, 55%, 38%) */
  --accent: #964e26;
  --accent-ink: #6e3818;
  --accent-soft: #d99a78;
  --accent-wash: #efd8c7;

  /* light surfaces */
  --bg:        #f5f1e8;
  --bg-raised: #fafaf3;
  --bg-sunk:   #ede8db;
  --fg-1:      #1f1d18;
  --fg-2:      #5a554a;
  --fg-3:      #8a8478;
  --hair:      rgba(31, 29, 24, 0.08);
  --hair-strong: rgba(31, 29, 24, 0.16);

  /* type */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Noto Serif SC", "Songti SC", "STSong", serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* scale */
  --t-largeTitle: 26px;
  --t-title:      22px;
  --t-title2:     19px;
  --t-title3:     18px;
  --t-headline:   16px;
  --t-body:       14px;
  --t-footnote:   12px;
  --t-caption:    11px;

  /* spacing */
  --sp-xs:   4px;
  --sp-sm:   6px;
  --sp-md:  10px;
  --sp-lg:  12px;
  --sp-xl:  18px;
  --sp-xxl: 24px;
  --sp-xxxl:32px;

  /* radius */
  --r-sm:  8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --d-100: 100ms;
  --d-200: 200ms;
  --d-400: 400ms;
  --d-800: 800ms;
}

[data-theme="dark"] {
  --bg:        #1a1814;
  --bg-raised: #252220;
  --bg-sunk:   #14110d;
  --fg-1:      #f0ebe0;
  --fg-2:      #9a958a;
  --fg-3:      #6b675e;
  --hair:      rgba(240, 235, 224, 0.10);
  --hair-strong: rgba(240, 235, 224, 0.20);

  --accent: #c97a52;
  --accent-ink: #e09a78;
  --accent-soft: #7a3f24;
  --accent-wash: #3a2418;

  --steep: #5a8c65;
  --cream: #f0ebe0;
}

/* ───── element resets within artboards ───── */
.tt {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--fg-1);
  background: var(--bg);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
}
.tt * { box-sizing: border-box; }
.tt h1, .tt h2, .tt h3, .tt h4, .tt p, .tt ul, .tt ol { margin: 0; padding: 0; }
.tt ul, .tt ol { list-style: none; }
.tt button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.tt a { color: inherit; text-decoration: none; }

/* ───── primitives ───── */
.pinyin { font-style: italic; font-feature-settings: "ss01"; letter-spacing: 0.01em; }
.han { font-family: var(--font-serif); font-weight: 400; }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.hairline { background: var(--hair); height: 1px; width: 100%; }

/* button */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-md);
  padding: 10px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--hair-strong);
  background: var(--bg-raised); color: var(--fg-1);
  font-size: var(--t-footnote); letter-spacing: 0.02em;
  transition: background var(--d-200) var(--ease), color var(--d-200) var(--ease), border-color var(--d-200) var(--ease);
}
.btn:hover { background: var(--fg-1); color: var(--bg); border-color: var(--fg-1); }
.btn-primary { background: var(--fg-1); color: var(--bg); border-color: var(--fg-1); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--cream); }
.btn-accent { background: var(--accent); color: var(--cream); border-color: var(--accent); }
.btn-accent:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn-ghost { background: transparent; border-color: var(--hair); }

/* chip */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--hair);
  font-size: var(--t-caption); color: var(--fg-2);
  background: transparent;
  letter-spacing: 0.04em;
}
.chip-solid { background: var(--bg-raised); }
.chip-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); display: inline-block;
}

/* card */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
}
.surface { background: var(--bg-raised); }
.surface-sunk { background: var(--bg-sunk); }

/* dividers */
.rule { height: 1px; background: var(--hair); }
.rule-strong { height: 1px; background: var(--hair-strong); }

/* utilities */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-xs { gap: var(--sp-xs); }
.gap-sm { gap: var(--sp-sm); }
.gap-md { gap: var(--sp-md); }
.gap-lg { gap: var(--sp-lg); }
.gap-xl { gap: var(--sp-xl); }
.gap-xxl { gap: var(--sp-xxl); }

.text-2 { color: var(--fg-2); }
.text-3 { color: var(--fg-3); }
.text-accent { color: var(--accent); }
.text-steep { color: var(--steep); }