/* Tea Taxi — design tokens (mirrors THE TEA global brief) */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=JetBrains+Mono:wght@400;500;600&family=Noto+Serif+SC:wght@400;500;700&display=swap');

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

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

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

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

  /* type — ×1.6 baseline */
  --t-largeTitle: 26px;
  --t-title:      22px;
  --t-title2:     19px;
  --t-title3:     18px;
  --t-headline:   16px;
  --t-body:       14px;
  --t-footnote:   12px;
  --t-caption:    11px;

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

  /* fonts */
  --f-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --f-serif-sc: "Noto Serif SC", serif;
  --f-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* accent (overridden per-artboard via tt-cat attr) */
  --accent: var(--cat-green);
}

/* light */
[data-theme="light"] {
  --bg:        #f5f1e8;
  --bg-raised: #fafaf3;
  --bg-sunk:   #efe9da;
  --fg-1:      #1f1d18;
  --fg-2:      #5a554a;
  --fg-3:      #9a958a;
  --hair:      rgba(31,29,24,0.08);
  --hair-2:    rgba(31,29,24,0.14);
  --tile-bg:   #ece5d2;
  --shadow:    0 1px 0 rgba(31,29,24,0.04);
}

/* dark */
[data-theme="dark"] {
  --bg:        #1a1814;
  --bg-raised: #252220;
  --bg-sunk:   #14120f;
  --fg-1:      #f0ebe0;
  --fg-2:      #9a958a;
  --fg-3:      #6b6760;
  --hair:      rgba(240,235,224,0.10);
  --hair-2:    rgba(240,235,224,0.18);
  --tile-bg:   #2a2622;
  --shadow:    0 1px 0 rgba(0,0,0,0.4);
}

/* category accent overrides */
[data-cat="green"]  { --accent: var(--cat-green); }
[data-cat="red"]    { --accent: var(--cat-red); }
[data-cat="yellow"] { --accent: var(--cat-yellow); }
[data-cat="oolong"] { --accent: var(--cat-oolong); }
[data-cat="white"]  { --accent: var(--cat-white); }
[data-cat="dark"]   { --accent: var(--cat-dark); }
[data-cat="puerh"]  { --accent: var(--cat-puerh); }

/* scoped reset for a screen */
.tt-screen, .tt-screen * { box-sizing: border-box; }
.tt-screen {
  font-family: var(--f-sans);
  font-weight: 400;
  color: var(--fg-1);
  background: var(--bg);
  font-size: var(--t-body);
  line-height: 1.45;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-feature-settings: "ss01", "cv11";
}
.tt-screen .mono { font-family: var(--f-mono); letter-spacing: 0; }
.tt-screen .sc   { font-family: var(--f-serif-sc); font-weight: 500; }
.tt-screen .pinyin { font-style: italic; }

/* tea taxi wordmark style */
.tt-wordmark {
  font-family: var(--f-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.tt-wordmark em {
  font-style: normal;
  color: var(--steep);
}
[data-theme="dark"] .tt-wordmark em { color: #7cc28a; }

/* hairsp em-dash (we use   —   visually via padding) */
.tt-dash { color: var(--fg-3); padding: 0 4px; }