/* ============================================================================
   VenBuilder — Foundations: Color & Type
   A calm, capable AI-native venture studio. Nature-inspired technological palette.
   ============================================================================ */

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

:root {
  /* === Brand color primitives ============================================ */
  --vb-green-50:  #eef6f0;
  --vb-green-100: #d6ebdc;
  --vb-green-200: #aed7bb;
  --vb-green-300: #7ebd92;
  --vb-green-400: #4fa46c;
  --vb-green-500: #2f8a52;
  --vb-green-600: #1f7042;
  --vb-green-700: #18583a;
  --vb-green-800: #123f2c;
  --vb-green-900: #0d2b20;
  --vb-green-950: #07160f;

  --vb-spring:      #57c98a;
  --vb-spring-soft: #8fe0b0;
  --vb-spring-glow: rgba(87, 201, 138, 0.18);

  --vb-copper: #b5764a;

  --vb-ink:    #0c1311;
  --vb-graphite-900: #14201b;
  --vb-graphite-800: #1d2a24;
  --vb-graphite-700: #2b3a32;
  --vb-graphite-600: #3e4f46;
  --vb-graphite-500: #5a6c62;
  --vb-graphite-400: #7d8d83;
  --vb-graphite-300: #a6b3aa;
  --vb-graphite-200: #cdd6cf;
  --vb-graphite-100: #e6ebe6;

  --vb-paper:      #f5f7f2;
  --vb-paper-pure: #fbfcf9;
  --vb-paper-sunk: #eceee7;

  /* === Semantic — LIGHT mode (default) =================================== */
  --bg:          var(--vb-paper);
  --bg-elevated: var(--vb-paper-pure);
  --bg-sunken:   var(--vb-paper-sunk);
  --bg-inverse:  var(--vb-green-950);

  --surface:        var(--vb-paper-pure);
  --surface-subtle: var(--vb-paper);

  --fg:   var(--vb-ink);
  --fg-2: var(--vb-graphite-600);
  --fg-3: var(--vb-graphite-400);
  --fg-on-accent: var(--vb-paper-pure);

  --brand:        var(--vb-green-600);
  --brand-strong: var(--vb-green-700);
  --brand-soft:   var(--vb-green-100);
  --accent:       var(--vb-spring);

  --border:        rgba(12, 19, 17, 0.10);
  --border-strong: rgba(12, 19, 17, 0.18);
  --ring:          var(--vb-green-500);

  --positive: #1f7042;
  --warning:  #b5764a;
  --danger:   #b23b3b;
  --info:     #2f6f6b;

  /* === Spacing scale (4px base) ========================================== */
  --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;
  --space-10: 128px;

  /* === Radii ============================================================= */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 999px;

  /* === Elevation ========================================================= */
  --shadow-xs: 0 1px 2px rgba(12, 19, 17, 0.06);
  --shadow-sm: 0 1px 3px rgba(12, 19, 17, 0.08), 0 1px 2px rgba(12, 19, 17, 0.04);
  --shadow-md: 0 4px 16px rgba(12, 19, 17, 0.08), 0 2px 4px rgba(12, 19, 17, 0.04);
  --shadow-lg: 0 12px 36px rgba(12, 19, 17, 0.12), 0 4px 8px rgba(12, 19, 17, 0.05);
  --shadow-glow: 0 0 0 4px var(--vb-spring-glow);

  /* === Type families ===================================================== */
  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;

  /* === Type scale ======================================================== */
  --text-display: 600 clamp(40px, 6vw, 76px)/1.02 var(--font-sans);
  --text-h1: 600 clamp(32px, 4vw, 52px)/1.06 var(--font-sans);
  --text-h2: 600 clamp(26px, 3vw, 38px)/1.12 var(--font-sans);
  --text-h3: 600 22px/1.2 var(--font-sans);
  --text-h4: 500 18px/1.3 var(--font-sans);
  --text-body-lg: 400 18px/1.6 var(--font-sans);
  --text-body: 400 16px/1.6 var(--font-sans);
  --text-body-sm: 400 14px/1.55 var(--font-sans);
  --text-caption: 400 13px/1.45 var(--font-sans);
  --text-mono: 500 13px/1.5 var(--font-mono);
  --text-eyebrow: 500 12px/1.4 var(--font-mono);

  /* === Tracking ========================================================== */
  --track-tight: -0.02em;
  --track-snug: -0.01em;
  --track-normal: 0;
  --track-wide: 0.08em;
  --track-eyebrow: 0.14em;

  /* === Motion ============================================================ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 360ms;
}

/* ===== Dark mode ========================================================= */
:root[data-theme="dark"], .vb-dark {
  --bg:          var(--vb-green-950);
  --bg-elevated: var(--vb-green-900);
  --bg-sunken:   #050d09;
  --bg-inverse:  var(--vb-paper);

  --surface:        var(--vb-green-900);
  --surface-subtle: #0a1f16;

  --fg:   #eaf2ec;
  --fg-2: var(--vb-graphite-300);
  --fg-3: var(--vb-graphite-500);
  --fg-on-accent: var(--vb-green-950);

  --brand:        var(--vb-spring);
  --brand-strong: var(--vb-spring-soft);
  --brand-soft:   rgba(87, 201, 138, 0.12);
  --accent:       var(--vb-spring);

  --border:        rgba(234, 242, 236, 0.10);
  --border-strong: rgba(234, 242, 236, 0.18);
  --ring:          var(--vb-spring);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
}

/* ===== Utility classes =================================================== */
.vb, [data-vb] {
  font: var(--text-body);
  color: var(--fg);
  letter-spacing: var(--track-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.vb-display { font: var(--text-display); letter-spacing: var(--track-tight); }
.vb-h1 { font: var(--text-h1); letter-spacing: var(--track-tight); }
.vb-h2 { font: var(--text-h2); letter-spacing: var(--track-snug); }
.vb-h3 { font: var(--text-h3); letter-spacing: var(--track-snug); }
.vb-h4 { font: var(--text-h4); }
.vb-lead { font: var(--text-body-lg); color: var(--fg-2); }
.vb-body { font: var(--text-body); }
.vb-small { font: var(--text-body-sm); color: var(--fg-2); }
.vb-caption { font: var(--text-caption); color: var(--fg-3); }
.vb-mono { font: var(--text-mono); }

.vb-eyebrow {
  font: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--brand);
}