/* =====================================================================
   twin3 — colors_and_type.css
   v1.0 · 2026-05-12
   
   Two themes (Cream default, Forest dark). Two accent layers
   (Storytelling = mint+gold, Product = terracotta) — kept apart.
   Three typefaces (EB Garamond / Inter / JetBrains Mono).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Forest anchor scale (shared by both themes) ---------- */
  --forest-deep: #2D4A35;
  --forest:      #4A7C59;
  --sage:        #8DAE9A;
  --mist:        #C5D9CB;

  /* ---------- Storytelling accents (banners, video, hero) ---------- */
  --mint:        #7DDC8C;
  --mint-glow:   #6FDB8F;
  --amber-warm:  #FF9A3C;
  --amber:       #FBBF24;
  --gold:        #FFD66E;

  /* ---------- Product accent (terracotta) — overridden in Forest ---------- */
  --terracotta:        #C0512F;
  --terracotta-hover:  #A84327;

  /* ---------- Status (semantic) ---------- */
  --status-success: var(--mint);
  --status-warn:    var(--amber);
  --status-danger:  var(--terracotta);

  /* ---------- Cream theme (default) ---------- */
  --bg-paper:      #FAFAF5;
  --bg-paper-sub:  #F5F3EE;
  --ink-primary:   #1A1A1A;
  --ink-secondary: #4A4A4A;
  --ink-muted:     #8A817A;

  /* ---------- Type families ---------- */
  --font-display: 'EB Garamond', 'Iowan Old Style', 'Palatino', Georgia, serif;
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale ---------- */
  --display-xl:   72px;   /* hero headlines */
  --display-lg:   56px;
  --display-md:   40px;   /* min display */
  --section-lg:   32px;   /* Inter Semibold */
  --section-md:   24px;
  --body-lg:      22px;   /* EB Garamond editorial */
  --body-md:      18px;
  --body-sm:      17px;
  --ui-body:      15px;
  --ui-sm:        13px;
  --kicker:       12px;   /* mono UPPERCASE, tracking 0.14em */
  --data:         16px;
  --data-lg:      18px;

  /* ---------- Tracking ---------- */
  --track-display:  -0.015em;
  --track-section:  -0.01em;
  --track-kicker:    0.14em;

  /* ---------- Line height ---------- */
  --lh-display:   1.05;
  --lh-section:   1.15;
  --lh-body:      1.55;
  --lh-ui:        1.6;

  /* ---------- Radii ---------- */
  --radius-xs:   4px;   /* status pills */
  --radius-sm:   6px;   /* inputs */
  --radius-md:  10px;   /* buttons */
  --radius-lg:  14px;   /* cards */
  --radius-xl:  24px;   /* hero modules */

  /* ---------- Spacing scale ---------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* ---------- Borders ---------- */
  --hairline:        rgba(26, 26, 26, 0.10);
  --hairline-strong: rgba(26, 26, 26, 0.18);

  /* ---------- Shadows (cream) ---------- */
  --shadow-card: 0 1px 0 rgba(26,26,26,0.04), 0 8px 24px -12px rgba(26,26,26,0.10);
  --shadow-lift: 0 2px 0 rgba(26,26,26,0.04), 0 16px 40px -16px rgba(26,26,26,0.16);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(26,26,26,0.04);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* ease-out */
  --dur-fast:   180ms;
  --dur-base:   220ms;
  --dur-slow:   320ms;

  /* ---------- Storytelling backdrop ---------- */
  --storytelling-bg: linear-gradient(135deg, #1A2E20 0%, #0F1810 100%);
  --matrix-rain-color: #A8B87A;
}

/* ---------- Forest theme ---------- */
:root[data-theme='forest'],
.theme-forest {
  --bg-paper:      #0A120C;
  --bg-paper-sub:  #0F1810;
  --ink-primary:   #E8E0C8;
  --ink-secondary: #C5C4B0;
  --ink-muted:     #9A9A80;

  --terracotta:        #D8744F;
  --terracotta-hover:  #E58A66;

  --hairline:        rgba(232, 224, 200, 0.10);
  --hairline-strong: rgba(232, 224, 200, 0.18);

  --shadow-card: 0 1px 0 rgba(0,0,0,0.4), 0 12px 32px -16px rgba(0,0,0,0.6);
  --shadow-lift: 0 2px 0 rgba(0,0,0,0.4), 0 20px 48px -18px rgba(0,0,0,0.7);
  --shadow-inset: inset 0 1px 0 rgba(232,224,200,0.06), inset 0 -1px 0 rgba(0,0,0,0.4);
}

/* =====================================================================
   Base + semantic typography
   ===================================================================== */

html, body {
  background: var(--bg-paper);
  color: var(--ink-primary);
  font-family: var(--font-ui);
  font-size: var(--ui-body);
  line-height: var(--lh-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — EB Garamond Semibold */
h1, .h1, .t3-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--display-lg);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--ink-primary);
  margin: 0;
  text-wrap: balance;
}
.t3-display-xl { font-size: var(--display-xl); }
.t3-display-md { font-size: var(--display-md); }

/* Section heads — Inter Semibold */
h2, .h2, .t3-section {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--section-lg);
  line-height: var(--lh-section);
  letter-spacing: var(--track-section);
  color: var(--ink-primary);
  margin: 0;
}
h3, .h3, .t3-section-md {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--section-md);
  line-height: var(--lh-section);
  letter-spacing: var(--track-section);
  color: var(--ink-primary);
  margin: 0;
}

/* Editorial body — EB Garamond Regular */
.t3-editorial {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--ink-secondary);
  text-wrap: pretty;
}
.t3-editorial-lg { font-size: var(--body-lg); }

/* UI body — Inter Regular */
p, .t3-body {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--ui-body);
  line-height: var(--lh-ui);
  color: var(--ink-secondary);
  margin: 0;
}

/* Kicker — JetBrains Mono UPPERCASE with ▸ prefix */
.t3-kicker {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--kicker);
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  color: var(--forest-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.t3-kicker::before { content: '▸'; }
.theme-forest .t3-kicker,
[data-theme='forest'] .t3-kicker { color: var(--mint); }

/* Data — JetBrains Mono natural case */
.t3-data {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--data);
  letter-spacing: 0;
  color: var(--ink-primary);
  font-feature-settings: 'tnum' 1, 'zero' 1;
}
.t3-data-lg { font-size: var(--data-lg); }

/* Ghost / link — mono UPPERCASE 12px, ink-secondary, trailing → */
.t3-ghost {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  color: var(--ink-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  transition: color var(--dur-fast) var(--ease);
}
.t3-ghost::after { content: '→'; }
.t3-ghost:hover { color: var(--ink-primary); }

/* =====================================================================
   Buttons
   ===================================================================== */

.t3-btn {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.005em;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.t3-btn:active { transform: translateY(1px); }
.t3-btn:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 4px;
}

.t3-btn--primary {
  background: var(--terracotta);
  color: #FFFFFF;
}
.t3-btn--primary:hover { background: var(--terracotta-hover); }

.t3-btn--secondary {
  background: transparent;
  color: var(--forest-deep);
  border-color: var(--hairline-strong);
}
.theme-forest .t3-btn--secondary,
[data-theme='forest'] .t3-btn--secondary { color: var(--mint); }
.t3-btn--secondary:hover { border-color: var(--ink-primary); }

/* =====================================================================
   Status pills
   ===================================================================== */

.t3-pill {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.t3-pill--success { background: color-mix(in oklab, var(--mint) 18%, transparent); color: #2A6B36; }
.t3-pill--warn    { background: color-mix(in oklab, var(--amber) 22%, transparent); color: #8A5A0B; }
.t3-pill--danger  { background: color-mix(in oklab, var(--terracotta) 16%, transparent); color: var(--terracotta-hover); }

.theme-forest .t3-pill--success, [data-theme='forest'] .t3-pill--success { color: var(--mint); }
.theme-forest .t3-pill--warn,    [data-theme='forest'] .t3-pill--warn    { color: var(--gold); }
.theme-forest .t3-pill--danger,  [data-theme='forest'] .t3-pill--danger  { color: var(--terracotta-hover); }

/* =====================================================================
   Data badge — mono numeral + lowercase mono unit on paper-sub
   ===================================================================== */

.t3-data-badge {
  font-family: var(--font-mono);
  background: var(--bg-paper-sub);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.t3-data-badge__num {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-primary);
  font-feature-settings: 'tnum' 1;
}
.t3-data-badge__unit {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-muted);
  text-transform: lowercase;
}

/* =====================================================================
   Cards
   ===================================================================== */

.t3-card {
  background: var(--bg-paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}
.t3-card--sub { background: var(--bg-paper-sub); }

/* =====================================================================
   Inputs
   ===================================================================== */

.t3-input {
  font-family: var(--font-ui);
  font-size: 15px;
  background: var(--bg-paper);
  color: var(--ink-primary);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease);
}
.t3-input::placeholder { color: var(--ink-muted); }
.t3-input:focus {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
  border-color: var(--terracotta);
}