/* ============================================================
   THETEA — colors_and_type.css
   Single source of truth for color, type, spacing, radii, shadows.
   Import once at the top of any artifact:
     <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

/* ---------- Webfonts ----------
   Brand fonts shipped with the system. Mono kept from Google (no brand mono provided).
   CJK + Arabic fallbacks load on demand for product names + multilingual UI.
*/




/* Curated upgrade — display: Instrument Serif (editorial, sharp italic);
   sans: General Sans (modern grotesque, free, Fontshare); mono: JetBrains Mono. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&family=JetBrains+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;500;600&display=swap");
@import url("https://api.fontshare.com/v2/css?f[]=general-sans@200,300,400,500,600,700&display=swap");

:root {
  /* ---------- Color: brand (refined) ---------- */
  --steep:        #17402C;   /* primary brand green — slightly cooler, more forest */
  --steep-900:    #0B2418;
  --steep-700:    #102E20;
  --steep-500:    #2A6044;
  --steep-300:    #5C8770;
  --steep-100:    #D8E3DC;   /* tonal block, soft chip */
  --matcha:       #6F9A52;   /* link / success — desaturated, less candy */
  --oolong:       #B45F2A;   /* roasted copper — drop caps, "new harvest" */
  --clay:         #C9876B;   /* soft clay — secondary accent for chips */

  /* ---------- Color: neutrals (sharper) ---------- */
  --ink:          #14110D;   /* primary type — deeper, warmer near-black */
  --graphite:     #3B3833;   /* secondary headings */
  --stone:        #6F6A60;   /* secondary type, captions — bumped contrast */
  --mist:         #E5E2D9;   /* hairlines, dividers */
  --mist-50:      #F2F0E9;
  --paper:        #FBF9F3;   /* raised card surface */
  --cream:        #F5EFE0;   /* warm tonal surface (no longer default) */
  --cream-50:     #FCFAF3;
  --white:        #FFFFFF;

  /* ---------- Color: semantic ---------- */
  --bg:           var(--cream);
  --bg-raised:    var(--paper);
  --bg-tonal:     var(--cream-50);
  --fg-1:         var(--ink);
  --fg-2:         var(--stone);
  --fg-3:         #B5B0A4;   /* tertiary; placeholder, disabled */
  --border:       var(--mist);
  --border-strong:#C9C2AE;
  --link:         var(--steep);
  --link-hover:   var(--matcha);
  --success:      var(--matcha);
  --warning:      var(--oolong);
  --danger:       #B14A3A;   /* tannic red — never overused */

  /* ---------- Type: families (curated) ----------
     Display: Instrument Serif — editorial, distinctive italic (Karsten Schmidt-feel).
     Sans:    General Sans — modern humanist grotesque (Fontshare).
     Mono:    JetBrains Mono — neutral specs.
     CJK:     Noto Serif SC — pairs the display weight in Chinese.
     Arabic:  Noto Naskh Arabic.
  */
  --font-display: "Instrument Serif", "Noto Serif", "Noto Serif SC", Georgia, serif;
  --font-sans:    "General Sans", "Noto Sans", "Noto Naskh Arabic", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-cjk:     "Noto Serif SC", "Instrument Serif", serif;
  --font-arabic:  "Noto Naskh Arabic", "General Sans", sans-serif;

  /* ---------- Type: scale (display in display, body in sans) ---------- */
  --display-1: clamp(56px, 9vw, 128px);  /* hero */
  --display-2: clamp(44px, 6vw, 88px);   /* page title */
  --h1:        clamp(36px, 4.2vw, 64px);
  --h2:        clamp(28px, 3vw, 44px);
  --h3:        24px;
  --h4:        20px;
  --eyebrow:   12px;
  --body-lg:   18px;
  --body:      16px;
  --body-sm:   14px;
  --caption:   12px;

  /* ---------- Type: line-height & tracking ---------- */
  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body:    1.6;
  --lh-tight:   1.3;

  --tr-tight:    -0.025em;
  --tr-display:  -0.035em;   /* Instrument Serif loves tight tracking at large sizes */
  --tr-normal:   0;
  --tr-eyebrow:  0.18em;   /* small caps eyebrow + wordmark */
  --tr-mono:     0.02em;

  /* ---------- Spacing (4-pt) ---------- */
  --s-0: 0;
  --s-1: 2px;
  --s-2: 4px;
  --s-3: 8px;
  --s-4: 12px;
  --s-5: 16px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;
  --s-9: 64px;
  --s-10: 96px;
  --s-11: 128px;

  /* ---------- Radii ---------- */
  --r-xs:  2px;
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-tile: 28px;     /* echoes the logo tile */
  --r-pill: 999px;

  /* ---------- Shadows (only two!) ---------- */
  --shadow-sm: 0 1px 0 rgba(26,22,18,.06), 0 1px 2px rgba(26,22,18,.04);
  --shadow-lg: 0 18px 40px -20px rgba(31,61,46,.35);

  /* ---------- Motion ---------- */
  --ease-tea: cubic-bezier(.2,.7,.2,1);
  --d-1: 100ms;
  --d-2: 200ms;
  --d-3: 400ms;
  --d-4: 800ms;

  /* ---------- Layout ---------- */
  --max-content: 1280px;
  --max-prose:   64ch;
  --gutter:      24px;
}

/* ---------- Dark theme ----------
   Activated by [data-theme="dark"] on <html>. Brand primitives (Steep, Matcha, Oolong)
   keep their hex; only semantic tokens remap. Saffron #E89F2F appears only on dark.
*/
:root[data-theme="dark"] {
  /* Surfaces */
  --bg:           #0F0C09;        /* Void — deeper than Ink */
  --bg-raised:    #1A1612;        /* Pu-erh — for raised cards */
  --bg-tonal:     #21180E;        /* warm tint */
  --paper:        var(--bg-raised);
  --cream:        var(--bg-tonal);
  --cream-50:     var(--bg);
  --mist-50:      #1F1B16;
  --white:        var(--bg-raised);
  /* Foreground */
  --fg-1:         #E8DBC4;        /* Bone — primary text */
  --fg-2:         #9A8B75;        /* Stone, warmer for dark */
  --fg-3:         #6B5D4A;
  --ink:          var(--fg-1);
  --graphite:     #C7B89E;
  --stone:        var(--fg-2);
  /* Borders */
  --border:       #2D2820;
  --border-strong:#3D352C;
  --mist:         var(--border);
  /* Links */
  --link:         #6F9A52;        /* Matcha brightens on dark */
  --link-hover:   #E89F2F;        /* Saffron accent — dark only */
  /* Steep light-on-dark variants */
  --steep-100:    #1F3A2C;
  --steep-300:    #4A7960;
  --steep-500:    #6FA585;
  /* Shadows — lighter pass on dark */
  --shadow-sm: 0 1px 0 rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow-lg: 0 18px 40px -20px rgba(0,0,0,.7);
}
:root[data-theme="dark"] ::selection { background: var(--steep-500); color: var(--bg); }

/* ---------- Base ---------- */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--steep); color: var(--cream); }

/* ---------- Semantic typography classes ---------- */
.display-1, .h-display-1 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: var(--display-1);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
}
.display-1 em, .h1 em, .h2 em, .display-2 em { font-style: italic; color: var(--steep); }
.display-italic { font-style: italic; }
.display-2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--display-2);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-tight);
}
.h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-tight);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-tight);
}
.h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--h3);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}
.h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--h4);
  line-height: var(--lh-tight);
}
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--eyebrow);
  line-height: 1;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--stone);
}
.wordmark {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
}
.body-lg, .lede {
  font-family: var(--font-sans);
  font-size: var(--body-lg);
  line-height: var(--lh-body);
  color: var(--fg-1);
}
.body {
  font-family: var(--font-sans);
  font-size: var(--body);
  line-height: var(--lh-body);
}
.body-sm {
  font-size: var(--body-sm);
  line-height: var(--lh-body);
}
.caption {
  font-family: var(--font-sans);
  font-size: var(--caption);
  line-height: 1.4;
  color: var(--stone);
}
.mono, .spec {
  font-family: var(--font-mono);
  font-size: var(--body-sm);
  letter-spacing: var(--tr-mono);
  color: var(--fg-1);
}
.dropcap::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--oolong);
  font-size: 4.2em;
  line-height: .85;
  float: left;
  padding: 8px 12px 0 0;
}

/* ---------- Element defaults ---------- */
h1 { @extend .h1; }
a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--d-1) var(--ease-tea);
}
a:hover { color: var(--matcha); }

/* ---------- Utility ---------- */
.surface-cream { background: var(--cream); }
.surface-paper { background: var(--paper); }
.surface-steep { background: var(--steep); color: var(--cream); }
.hairline      { border: 1px solid var(--border); }
.tile          { border-radius: var(--r-tile); }
.card          { border-radius: var(--r-md); border: 1px solid var(--border); background: var(--cream); }
.card-paper    { border-radius: var(--r-md); background: var(--paper); box-shadow: var(--shadow-sm); }