/* ============================================================
   TerraBite Design System — colors_and_type.css
   Trust in every byte.
   ------------------------------------------------------------
   All values pulled from the TerraBite Brand Book (13 pages).
   Primary gradient: #2FA99A → #79B882 @ 35° (bottom-left to top-right).
   Typography: Montserrat (Bold primary, Regular secondary).
   Vendored from the Claude Design project "TerraMind Design
   Refinement" (_ds/…/colors_and_type.css); font @import inlined.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  /* --- Brand gradient -------------------------------------- */
  --tb-gradient-start: #2FA99A;   /* teal-green, from brandbook */
  --tb-gradient-end:   #79B882;   /* lime-green, from brandbook */
  --tb-gradient: linear-gradient(55deg, var(--tb-gradient-start) 0%, var(--tb-gradient-end) 100%);

  /* --- Primary palette (core product brand colors) -------- */
  --tb-teal:        #2FA99A;  /* Primary — TerraPlaces & TerraBite pin */
  --tb-green:       #79B882;  /* Gradient end, lime */
  --tb-green-leaf:  #89C26D;  /* PRISM / TerraPlaces accent */
  --tb-teal-deep:   #237162;  /* TerraType solid — also darkest trust color */
  --tb-teal-mint:   #33B19D;  /* PRISM callout */
  --tb-teal-sage:   #84C3B1;  /* TerraBite soft */

  /* --- Accent palette (PRISM spectrum + alerts) ----------- */
  --tb-orange:  #EC6423;
  --tb-magenta: #C30A6C;
  --tb-navy:    #2F485A;  /* PRISM — also used as deep UI fg */
  --tb-cyan:    #10B4BC;
  --tb-gold:    #F0BE3E;
  --tb-yellow:  #F6E041;

  /* --- Neutrals (derived; brandbook leaves these open) ---- */
  --tb-ink:       #0E1A20;
  --tb-ink-2:     #2F485A;
  --tb-ink-3:     #5C6B74;
  --tb-ink-4:     #8B98A0;
  --tb-line:      #E4E9EC;
  --tb-line-soft: #F0F3F4;
  --tb-bg:        #FFFFFF;
  --tb-bg-soft:   #F6F9F8;
  --tb-bg-mist:   #EDF5F2;

  /* --- Semantic colors ------------------------------------ */
  --tb-fg:        var(--tb-ink);
  --tb-fg-muted:  var(--tb-ink-3);
  --tb-fg-subtle: var(--tb-ink-4);
  --tb-fg-on-brand: #FFFFFF;
  --tb-brand:     var(--tb-teal);
  --tb-brand-hover: #28998B;
  --tb-brand-press: #1F8275;
  --tb-focus-ring:  rgba(47, 169, 154, 0.35);

  --tb-success: #33B19D;
  --tb-warning: #F0BE3E;
  --tb-danger:  #C30A6C;
  --tb-info:    #10B4BC;

  /* --- Surfaces ------------------------------------------- */
  --tb-surface:        #FFFFFF;
  --tb-surface-raised: #FFFFFF;
  --tb-surface-sunk:   var(--tb-bg-soft);
  --tb-surface-brand:  var(--tb-bg-mist);
  --tb-surface-ink:    var(--tb-navy);

  /* --- Radii --------------------------------------------- */
  --tb-radius-xs: 4px;
  --tb-radius-sm: 8px;
  --tb-radius-md: 12px;
  --tb-radius-lg: 16px;
  --tb-radius-xl: 24px;
  --tb-radius-pill: 999px;

  /* --- Shadows (airy, trustworthy, soft greens) ---------- */
  --tb-shadow-xs: 0 1px 1px rgba(35, 113, 98, 0.06);
  --tb-shadow-sm: 0 1px 2px rgba(35, 113, 98, 0.08), 0 1px 3px rgba(35, 113, 98, 0.04);
  --tb-shadow-md: 0 4px 12px -2px rgba(35, 113, 98, 0.10), 0 2px 4px rgba(35, 113, 98, 0.06);
  --tb-shadow-lg: 0 16px 32px -8px rgba(35, 113, 98, 0.14), 0 4px 8px rgba(35, 113, 98, 0.06);
  --tb-shadow-brand: 0 8px 24px -4px rgba(47, 169, 154, 0.35);

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

  /* --- Type ---------------------------------------------- */
  --tb-font-primary: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --tb-font-secondary: var(--tb-font-primary);
  --tb-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --tb-weight-regular: 400;
  --tb-weight-medium:  500;
  --tb-weight-semibold: 600;
  --tb-weight-bold:    700;
  --tb-weight-black:   800;

  /* Display + body scale (desktop) */
  --tb-fs-display: 72px;  --tb-lh-display: 1.05;  --tb-ls-display: -0.02em;
  --tb-fs-h1:      48px;  --tb-lh-h1:      1.10;  --tb-ls-h1:      -0.015em;
  --tb-fs-h2:      36px;  --tb-lh-h2:      1.15;  --tb-ls-h2:      -0.01em;
  --tb-fs-h3:      28px;  --tb-lh-h3:      1.20;  --tb-ls-h3:      -0.005em;
  --tb-fs-h4:      22px;  --tb-lh-h4:      1.25;
  --tb-fs-h5:      18px;  --tb-lh-h5:      1.35;
  --tb-fs-body:    16px;  --tb-lh-body:    1.55;
  --tb-fs-small:   14px;  --tb-lh-small:   1.45;
  --tb-fs-xsmall:  12px;  --tb-lh-xsmall:  1.4;
  --tb-fs-eyebrow: 12px;  --tb-ls-eyebrow: 0.12em;
}

.tb-body,
.tb-reset {
  font-family: var(--tb-font-primary);
  color: var(--tb-fg);
  font-size: var(--tb-fs-body);
  line-height: var(--tb-lh-body);
  font-weight: var(--tb-weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tb-display {
  font-family: var(--tb-font-primary);
  font-weight: var(--tb-weight-bold);
  font-size: var(--tb-fs-display);
  line-height: var(--tb-lh-display);
  letter-spacing: var(--tb-ls-display);
}

.tb-h1 { font-family: var(--tb-font-primary); font-weight: var(--tb-weight-bold); font-size: var(--tb-fs-h1); line-height: var(--tb-lh-h1); letter-spacing: var(--tb-ls-h1); }
.tb-h2 { font-family: var(--tb-font-primary); font-weight: var(--tb-weight-bold); font-size: var(--tb-fs-h2); line-height: var(--tb-lh-h2); letter-spacing: var(--tb-ls-h2); }
.tb-h3 { font-family: var(--tb-font-primary); font-weight: var(--tb-weight-semibold); font-size: var(--tb-fs-h3); line-height: var(--tb-lh-h3); letter-spacing: var(--tb-ls-h3); }
.tb-h4 { font-family: var(--tb-font-primary); font-weight: var(--tb-weight-semibold); font-size: var(--tb-fs-h4); line-height: var(--tb-lh-h4); }
.tb-h5 { font-family: var(--tb-font-primary); font-weight: var(--tb-weight-semibold); font-size: var(--tb-fs-h5); line-height: var(--tb-lh-h5); }

.tb-lead  { font-size: 20px; line-height: 1.5; color: var(--tb-fg); font-weight: var(--tb-weight-regular); }
.tb-body  { font-size: var(--tb-fs-body); line-height: var(--tb-lh-body); }
.tb-small { font-size: var(--tb-fs-small); line-height: var(--tb-lh-small); color: var(--tb-fg-muted); }
.tb-caption { font-size: var(--tb-fs-xsmall); line-height: var(--tb-lh-xsmall); color: var(--tb-fg-subtle); }

.tb-eyebrow {
  font-family: var(--tb-font-primary);
  font-weight: var(--tb-weight-bold);
  font-size: var(--tb-fs-eyebrow);
  line-height: 1;
  letter-spacing: var(--tb-ls-eyebrow);
  text-transform: uppercase;
  color: var(--tb-brand);
}

.tb-mono {
  font-family: var(--tb-font-mono);
  font-size: var(--tb-fs-small);
}

.tb-gradient-text {
  background: var(--tb-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}