/* Tea Dog — design tokens from THE TEA constellation system */

:root {
  /* Brand */
  --steep: #3a6b45;
  --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;

  /* Type scale (×1.6 baseline) */
  --fs-largeTitle: 26px;
  --fs-title:      22px;
  --fs-title2:     19px;
  --fs-title3:     18px;
  --fs-headline:   16px;
  --fs-body:       14px;
  --fs-footnote:   12px;
  --fs-caption:    11px;

  /* Spacing (×2 baseline) */
  --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);
  --t-1: 100ms;
  --t-2: 200ms;
  --t-3: 400ms;
  --t-4: 800ms;

  /* Font stacks */
  --f-sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-serif-sc: "Noto Serif SC", "Songti SC", serif;
  --f-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* Dark surface (default) */
:root,
[data-theme="dark"] {
  --bg:        #1a1814;
  --bg-raised: #252220;
  --bg-sunk:   #131110;
  --fg-1:      #f0ebe0;
  --fg-2:      #9a958a;
  --fg-3:      #6e6a62;
  --hairline:  rgba(240, 235, 224, 0.10);
  --hairline-strong: rgba(240, 235, 224, 0.18);
  --steep-fg:  #6fa07a;
  --steep-bg:  rgba(58, 107, 69, 0.18);
  --warn:      #c5a63d;
  --danger:    #c45a3d;
}

[data-theme="light"] {
  --bg:        #f5f1e8;
  --bg-raised: #fafaf3;
  --bg-sunk:   #ebe6da;
  --fg-1:      #1f1d18;
  --fg-2:      #5a554a;
  --fg-3:      #8a857a;
  --hairline:  rgba(31, 29, 24, 0.08);
  --hairline-strong: rgba(31, 29, 24, 0.16);
  --steep-fg:  #3a6b45;
  --steep-bg:  rgba(58, 107, 69, 0.10);
  --warn:      #8a6f15;
  --danger:    #8b2500;
}

/* ── Base ─────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-1);
  font: var(--fs-body)/1.5 var(--f-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--steep-bg); color: var(--fg-1); }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

.mono { font-family: var(--f-mono); font-feature-settings: "tnum"; }
.serif-sc { font-family: var(--f-serif-sc); }
.pinyin { font-style: italic; }

/* Density modes */
[data-density="dense"]   { --row-pad: var(--sp-sm) var(--sp-md); --grid-gap: var(--sp-md); }
[data-density="medium"]  { --row-pad: var(--sp-md) var(--sp-lg); --grid-gap: var(--sp-xl); }
[data-density="sparse"]  { --row-pad: var(--sp-xl) var(--sp-xxl); --grid-gap: var(--sp-xxl); }

/* Density defaults */
:root { --row-pad: var(--sp-md) var(--sp-lg); --grid-gap: var(--sp-xl); }

/* Viewport simulation */
.viewport {
  margin: 0 auto;
  background: var(--bg);
  transition: max-width var(--t-3) var(--ease);
}
[data-viewport="mobile"]  .viewport { max-width: 390px; }
[data-viewport="tablet"]  .viewport { max-width: 768px; }
[data-viewport="desktop"] .viewport { max-width: 1280px; }

/* Hairlines */
.hairline-t { border-top: 1px solid var(--hairline); }
.hairline-b { border-bottom: 1px solid var(--hairline); }
.hairline-r { border-right: 1px solid var(--hairline); }
.hairline-l { border-left: 1px solid var(--hairline); }