/* ============================================================
   BizStubs Design System — core tokens
   Ported from the ranktorent-family design system (Geist / ink+honey).
   ============================================================ */

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

:root {
  /* ---------- COLOR — neutrals (slate-cool) ---------- */
  --ink-950: #07090C;
  --ink-900: #0F1318;
  --ink-800: #1C222B;
  --ink-700: #2D3540;
  --ink-600: #475061;
  --ink-500: #5E6878;
  --ink-400: #8B93A1;
  --ink-300: #B8BEC8;
  --ink-200: #E2E5EA;
  --ink-150: #ECEEF2;
  --ink-100: #F3F5F7;
  --ink-50:  #F8FAFB;
  --paper:   #FFFFFF;

  /* ---------- COLOR — brand accent ("Slate blue" palette, matches ranktorent) ---------- */
  --honey-900: #0E224A;
  --honey-800: #163673;
  --honey-700: #1F4596;
  --honey-600: #2D5BB8;   /* primary */
  --honey-500: #4870C0;
  --honey-400: #6F8DBA;
  --honey-300: #9CB3D2;
  --honey-200: #C9D7EA;
  --honey-100: #E5EDF7;
  --honey-50:  #F4F7FC;

  /* ---------- COLOR — semantic ---------- */
  --success-700: #15803D;
  --success-600: #16A34A;
  --success-100: #DCFCE7;
  --success-50:  #F0FDF4;

  --warning-700: #B45309;
  --warning-600: #D97706;
  --warning-100: #FEF3C7;
  --warning-50:  #FFFBEB;

  --danger-700: #B91C1C;
  --danger-600: #DC2626;
  --danger-100: #FEE2E2;
  --danger-50:  #FEF2F2;

  --info-700: #1D4ED8;
  --info-600: #2563EB;
  --info-100: #DBEAFE;
  --info-50:  #EFF6FF;

  /* ---------- COLOR — semantic aliases ---------- */
  --fg:           var(--ink-900);
  --fg-muted:     var(--ink-600);
  --fg-subtle:    var(--ink-500);
  --fg-faint:     var(--ink-400);
  --fg-on-brand:  var(--paper);

  --bg:           var(--paper);
  --bg-subtle:    var(--ink-50);
  --bg-muted:     var(--ink-100);
  --bg-warm:      var(--honey-50);

  --border:       var(--ink-200);
  --border-strong:var(--ink-300);

  --accent:       var(--honey-600);
  --accent-hover: var(--honey-700);
  --accent-press: var(--honey-800);
  --accent-soft:  var(--honey-100);
  --accent-fg:    var(--honey-800);

  --focus-ring:   var(--honey-500);

  /* ---------- TYPOGRAPHY — families ---------- */
  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* ---------- TYPOGRAPHY — scale ---------- */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-36: 36px;
  --fs-48: 48px;
  --fs-60: 60px;
  --fs-72: 72px;

  /* ---------- TYPOGRAPHY — weight ---------- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ---------- SPACING ---------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* ---------- RADII ---------- */
  --r-2:   4px;
  --r-3:   6px;
  --r-4:   8px;
  --r-6:   12px;
  --r-8:   16px;
  --r-full: 9999px;

  /* ---------- SHADOWS ---------- */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(15, 23, 42, 0.04);
  --shadow-2: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-3: 0 16px 40px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
  --ring-focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--focus-ring);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   100ms;
  --dur:        150ms;
  --dur-slow:   240ms;
}

/* ============================================================
   Base
   ============================================================ */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11";
}

/* ============================================================
   Semantic type styles
   ============================================================ */

.t-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  font-size: var(--fs-60);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--fg);
}

.t-h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  font-size: var(--fs-36);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--fg);
}

.t-h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  font-size: var(--fs-24);
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--fg);
}

.t-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  font-size: var(--fs-18);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.t-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  font-size: var(--fs-15);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--fg);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-15);
  line-height: 1.55;
  color: var(--fg);
}

.t-body-lg {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: 1.55;
  color: var(--fg-muted);
}

.t-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--fg-muted);
}

.t-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-12);
  line-height: 1.4;
  color: var(--fg-subtle);
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.t-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-13);
  line-height: 1.3;
  color: var(--fg);
}

.t-mono {
  font-family: var(--font-mono);
  font-feature-settings: "ss01", "tnum";
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-14);
  letter-spacing: -0.01em;
}

.t-num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.t-code {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  padding: 1px 6px;
  background: var(--bg-muted);
  border-radius: var(--r-2);
  color: var(--fg);
}