/* THE TEA — design tokens (tea.glass subset)
   Sourced verbatim from 00_GLOBAL_BRIEF.md §2.1.
   data-theme="dark" mirrors surfaces. Never pure white. */

:root,
[data-theme="light"] {
  /* Brand */
  --steep: #3a6b45;
  --cream: #f5f1e8;
  --stone: #9a958a;

  /* Surfaces (light) */
  --bg: #f5f1e8;
  --bg-raised: #fafaf3;
  --bg-sunk: #ece7da;
  --fg-1: #1f1d18;
  --fg-2: #5a554a;
  --fg-3: #9a958a;
  --hairline: rgba(31, 29, 24, 0.08);
  --hairline-strong: rgba(31, 29, 24, 0.16);

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

  /* Type */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-serif-sc: "Noto Serif SC", "Songti SC", "Source Han Serif", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale (×1.6 baseline, §2.2) */
  --t-large-title: 26px;
  --t-title: 22px;
  --t-title-2: 19px;
  --t-title-3: 18px;
  --t-headline: 16px;
  --t-body: 14px;
  --t-footnote: 12px;
  --t-caption: 11px;
  /* Display tier — logical extension for hero moments only */
  --t-display-s: 36px;
  --t-display-m: 44px;
  --t-display-l: 56px;

  /* Spacing (×2 baseline) */
  --xs: 4px;
  --sm: 6px;
  --md: 10px;
  --lg: 12px;
  --xl: 18px;
  --xxl: 24px;
  --xxxl: 32px;
  --xxxxl: 48px;
  --xxxxxl: 64px;

  /* 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-fast: 100ms;
  --d-med: 200ms;
  --d-slow: 400ms;
  --d-xslow: 800ms;
}

[data-theme="dark"] {
  --bg: #1a1814;
  --bg-raised: #252220;
  --bg-sunk: #141210;
  --fg-1: #f0ebe0;
  --fg-2: #9a958a;
  --fg-3: #6a655c;
  --hairline: rgba(240, 235, 224, 0.10);
  --hairline-strong: rgba(240, 235, 224, 0.18);
  /* steep stays — verify legibility in usage */
  --steep: #5a8a64;
  --cream: #1a1814;
}

/* Resets scoped to .tg-root so they never escape an artboard */
.tg-root {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.tg-root *,
.tg-root *::before,
.tg-root *::after {
  box-sizing: border-box;
}
.tg-root h1,
.tg-root h2,
.tg-root h3,
.tg-root h4,
.tg-root h5,
.tg-root p,
.tg-root ul,
.tg-root ol,
.tg-root figure {
  margin: 0;
  padding: 0;
  font-weight: inherit;
}
.tg-root ul,
.tg-root ol {
  list-style: none;
}
.tg-root button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.tg-root a {
  color: inherit;
  text-decoration: none;
}
.tg-root img,
.tg-root svg {
  display: block;
  max-width: 100%;
}

/* Pinyin: italic + hairspace em-dash convention */
.tg-pinyin {
  font-style: italic;
}
.tg-cn {
  font-family: var(--font-serif-sc);
  font-weight: 400;
}
.tg-num,
.tg-spec {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
}

/* Hairline rule */
.tg-rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 0;
}

/* Photo placeholder — striped tonal, monospace label */
.tg-photo {
  position: relative;
  background: repeating-linear-gradient(
    135deg,
    var(--bg-sunk) 0,
    var(--bg-sunk) 2px,
    var(--bg-raised) 2px,
    var(--bg-raised) 14px
  );
  color: var(--fg-3);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--md);
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  overflow: hidden;
}
.tg-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--hairline);
  pointer-events: none;
}

/* Chip */
.tg-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--xs);
  padding: var(--xs) var(--md);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  font-size: var(--t-footnote);
  color: var(--fg-2);
  white-space: nowrap;
}
.tg-chip[data-active="true"] {
  background: var(--fg-1);
  color: var(--bg);
  border-color: var(--fg-1);
}

/* Button — primary "steep" */
.tg-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--md);
  padding: var(--lg) var(--xl);
  border-radius: var(--r-pill);
  background: var(--steep);
  color: #f5f1e8;
  font-size: var(--t-body);
  font-weight: 500;
  transition: background var(--d-med) var(--ease);
  cursor: pointer;
  border: 0;
}
.tg-btn:hover {
  background: #2c5536;
}
[data-theme="dark"] .tg-btn:hover {
  background: #6f9e79;
}
.tg-btn--ghost {
  background: transparent;
  color: var(--fg-1);
  border: 1px solid var(--hairline-strong);
}
.tg-btn--ghost:hover {
  background: var(--bg-raised);
}

/* Eyebrow */
.tg-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Steeping animation — single use in hero */
@keyframes tg-drift {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.85; }
  50% { transform: translateY(-6px) rotate(2deg); opacity: 1; }
}
@keyframes tg-drift-2 {
  0%, 100% { transform: translateY(2px) rotate(-1deg); opacity: 0.7; }
  50% { transform: translateY(-4px) rotate(3deg); opacity: 0.95; }
}
@keyframes tg-pour {
  0% { height: 0; opacity: 0; }
  20% { opacity: 1; }
  100% { height: 100%; opacity: 1; }
}

/* Headings */
.tg-display {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--t-display-m);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  text-wrap: balance;
}
.tg-display--l { font-size: var(--t-display-l); }
.tg-display--s { font-size: var(--t-display-s); }
.tg-large-title {
  font-size: var(--t-large-title);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.tg-title {
  font-size: var(--t-title);
  line-height: 1.2;
  font-weight: 500;
}
.tg-title-2 {
  font-size: var(--t-title-2);
  line-height: 1.25;
  font-weight: 500;
}
.tg-headline {
  font-size: var(--t-headline);
  line-height: 1.35;
  font-weight: 500;
}
.tg-body {
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: pretty;
}
.tg-foot {
  font-size: var(--t-footnote);
  color: var(--fg-2);
  line-height: 1.45;
}
.tg-cap {
  font-size: var(--t-caption);
  color: var(--fg-3);
  line-height: 1.4;
}

/* Scroll containment inside artboards */
.tg-root.tg-clip {
  overflow: hidden;
}