/* Tea Degree — design tokens (light + dark) */
/* Inherits the constellation system; project-tinted toward observatory restraint. */

:root, .td-theme-light {
  --bg:        #f5f1e8;
  --bg-raised: #fafaf3;
  --bg-sunk:   #ede8da;
  --fg-1:      #1f1d18;
  --fg-2:      #5a554a;
  --fg-3:      #9a958a;
  --hairline:  rgba(31, 29, 24, 0.08);
  --hairline-2:rgba(31, 29, 24, 0.14);
  --steep:     #3a6b45;
  --cream:     #f5f1e8;
  --stone:     #9a958a;
  --accent:    #c5a63d;
  --warn:      #b87333;
  --danger:    #8b2500;

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

  /* 16 aroma family hues — derived, matte */
  --ar-floral:   #c47a8e;
  --ar-fruity:   #c97a3a;
  --ar-honey:    #c89a3d;
  --ar-vegetal:  #6e8a3d;
  --ar-nutty:    #9c7a45;
  --ar-roasted:  #855531;
  --ar-woody:    #7a5a39;
  --ar-earthy:   #5e4a35;
  --ar-mineral:  #6b7280;
  --ar-smoky:    #4d4438;
  --ar-spicy:    #9b3a2c;
  --ar-sweet:    #b89a6e;
  --ar-camphor:  #5a8a82;
  --ar-aged:     #6e6356;
  --ar-dairy:    #c5b594;
  --ar-marine:   #4a7a8a;

  --shadow-1: 0 1px 2px rgba(31,29,24,0.04);
  --shadow-2: 0 6px 18px rgba(31,29,24,0.06), 0 1px 2px rgba(31,29,24,0.04);
}

.td-theme-dark {
  --bg:        #1a1814;
  --bg-raised: #252220;
  --bg-sunk:   #14120f;
  --fg-1:      #f0ebe0;
  --fg-2:      #9a958a;
  --fg-3:      #5a554a;
  --hairline:  rgba(240, 235, 224, 0.10);
  --hairline-2:rgba(240, 235, 224, 0.18);
  --steep:     #5e9e6d;
  --cream:     #1a1814;
  --stone:     #9a958a;
  --accent:    #d4b94a;
  --warn:      #d18a4a;
  --danger:    #c5563a;

  --cat-green:  #6e9e7c;
  --cat-red:    #c5563a;
  --cat-yellow: #d4b94a;
  --cat-oolong: #d18a4a;
  --cat-white:  #b0a18c;
  --cat-dark:   #6b504a;
  --cat-puerh:  #7a5e54;

  --ar-floral:   #d49aa8;
  --ar-fruity:   #db9a5e;
  --ar-honey:    #dbb961;
  --ar-vegetal:  #8aac5e;
  --ar-nutty:    #b5946a;
  --ar-roasted:  #a3704a;
  --ar-woody:    #9a7c5a;
  --ar-earthy:   #87705a;
  --ar-mineral:  #8a93a0;
  --ar-smoky:    #74695a;
  --ar-spicy:    #b85a4a;
  --ar-sweet:    #c9ad85;
  --ar-camphor:  #7eada6;
  --ar-aged:     #8e8273;
  --ar-dairy:    #d4c7a8;
  --ar-marine:   #6e9aaa;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-2: 0 6px 18px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
}

/* Type scale (×1.6) */
.td {
  --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 (×2) */
  --s-xs:  4px;
  --s-sm:  6px;
  --s-md:  10px;
  --s-lg:  12px;
  --s-xl:  18px;
  --s-xxl: 24px;
  --s-xxxl:32px;

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

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  font-family: 'IBM Plex Sans', 'IBM Plex Sans Var', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-feature-settings: 'ss01', 'cv11';
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--fg-1);
  background: var(--bg);
  letter-spacing: 0.005em;
}

.td * { box-sizing: border-box; }
.td .mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-feature-settings: 'ss02', 'cv02'; }
.td .serif-cn { font-family: 'Noto Serif SC', 'Songti SC', serif; }
.td .pinyin { font-style: italic; font-weight: 400; }

.td h1, .td h2, .td h3, .td h4 { margin: 0; font-weight: 500; letter-spacing: -0.01em; }
.td h1 { font-size: var(--t-largetitle); line-height: 1.2; }
.td h2 { font-size: var(--t-title); line-height: 1.25; }
.td h3 { font-size: var(--t-title2); line-height: 1.3; }
.td h4 { font-size: var(--t-headline); line-height: 1.35; }
.td p  { margin: 0; }

.td button { font-family: inherit; font-size: inherit; color: inherit; }

/* Surface primitives */
.td-card {
  background: var(--bg-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.td-card-tight { border-radius: var(--r-md); }
.td-rule { height: 1px; background: var(--hairline); border: 0; }
.td-eyebrow {
  font-size: var(--t-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 500;
}
.td-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--bg-sunk);
  border: 1px solid var(--hairline);
  font-size: var(--t-footnote);
  color: var(--fg-2);
  font-weight: 500;
}
.td-chip-strong {
  background: transparent;
  border-color: var(--hairline-2);
  color: var(--fg-1);
}
.td-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px;
  padding: 0 var(--s-lg);
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-2);
  background: transparent;
  color: var(--fg-1);
  font-size: var(--t-footnote);
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.td-btn:hover { background: var(--bg-sunk); }
.td-btn-primary {
  background: var(--fg-1); color: var(--bg-raised);
  border-color: var(--fg-1);
}
.td-btn-primary:hover { background: var(--steep); border-color: var(--steep); color: #f5f1e8; }
.td-btn-sm { height: 28px; padding: 0 10px; font-size: var(--t-caption); }

.td-icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Lucide-ish icons inline component class */
.td-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }