/* botario design tokens — derived from botario.com (Apr 2026)
 * Brand is enterprise B2B SaaS with a vivid magenta/hot-pink core,
 * white surfaces, soft pink glows, and lime/teal accents on workflow cards.
 * Typography on the live site appears to be a clean grotesque sans;
 * we use Inter as the closest open substitute and Caveat for the
 * hand-drawn marker annotations that are a recurring brand motif.
 */

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

:root {
  /* --- BRAND CORE -------------------------------------------------- */
  --bo-magenta-50:  #ffe6f4;
  --bo-magenta-100: #ffc7e7;
  --bo-magenta-200: #ff8dce;
  --bo-magenta-300: #ff5cb8;
  --bo-magenta-400: #ff2ba2;
  --bo-magenta-500: #e6007e; /* primary */
  --bo-magenta-600: #c30069;
  --bo-magenta-700: #9d0054;
  --bo-magenta-glow: #ffe0f0; /* the soft halo behind product shots */

  /* Workflow accent strips — seen on flow-editor node cards */
  --bo-accent-lime:  #c4e85c;
  --bo-accent-teal:  #2da9b8;
  --bo-accent-cyan:  #7fd4dd;
  --bo-accent-violet:#7c5cff;
  --bo-accent-orange:#ff7a3d;

  /* --- NEUTRALS ---------------------------------------------------- */
  --bo-ink:        #0e0e1a;  /* near-black for headings */
  --bo-ink-soft:   #2a2a3a;
  --bo-text:       #1a1a26;
  --bo-text-muted: #5b6172;
  --bo-text-faint: #9098a8;
  --bo-line:       #e6e8ee;
  --bo-line-soft:  #f0f2f6;
  --bo-bg:         #ffffff;
  --bo-bg-alt:     #f7f8fb;
  --bo-bg-pink:    #fff5fa;
  --bo-bg-dark:    #0e0e1a;   /* trust band background where customer logos sit */

  /* --- SEMANTIC ---------------------------------------------------- */
  --bo-success: #18a957;
  --bo-warning: #f4a300;
  --bo-danger:  #e02b3a;
  --bo-info:    var(--bo-accent-teal);

  /* --- FOUNDATIONS ------------------------------------------------- */
  --bo-radius-xs: 6px;
  --bo-radius-sm: 10px;
  --bo-radius-md: 14px;
  --bo-radius-lg: 20px;
  --bo-radius-xl: 28px;
  --bo-radius-pill: 999px;

  --bo-shadow-xs: 0 1px 2px rgba(14,14,26,.06);
  --bo-shadow-sm: 0 2px 8px rgba(14,14,26,.06), 0 1px 2px rgba(14,14,26,.04);
  --bo-shadow-md: 0 8px 24px rgba(14,14,26,.08), 0 2px 6px rgba(14,14,26,.04);
  --bo-shadow-lg: 0 24px 60px rgba(14,14,26,.10), 0 4px 10px rgba(14,14,26,.04);
  --bo-shadow-pink: 0 0 0 1px var(--bo-magenta-100), 0 12px 40px rgba(230,0,126,.18);

  /* Soft pink halo used behind product screenshots on the live site */
  --bo-halo-pink: radial-gradient(60% 60% at 50% 50%, rgba(255,92,184,.30) 0%, rgba(255,255,255,0) 70%);

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

  /* --- TYPOGRAPHY -------------------------------------------------- */
  --bo-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bo-font-mark: 'Caveat', 'Comic Sans MS', cursive; /* hand-drawn marker annotations */
  --bo-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale */
  --bo-text-xs:   12px;
  --bo-text-sm:   14px;
  --bo-text-base: 16px;
  --bo-text-md:   18px;
  --bo-text-lg:   20px;
  --bo-text-xl:   24px;
  --bo-text-2xl:  32px;
  --bo-text-3xl:  40px;
  --bo-text-4xl:  56px;
  --bo-text-5xl:  72px;

  --bo-leading-tight: 1.1;
  --bo-leading-snug:  1.25;
  --bo-leading-body:  1.55;
  --bo-leading-loose: 1.7;

  --bo-tracking-tight:  -0.02em;
  --bo-tracking-normal: 0;
  --bo-tracking-wide:   0.04em;
  --bo-tracking-eyebrow: 0.12em;

  /* --- MOTION ------------------------------------------------------ */
  --bo-ease: cubic-bezier(.2,.7,.2,1);
  --bo-ease-out: cubic-bezier(.16,1,.3,1);
  --bo-dur-fast: 120ms;
  --bo-dur: 200ms;
  --bo-dur-slow: 360ms;
}

/* =================================================================
   SEMANTIC ELEMENT STYLES — opt-in via .bo-prose or direct selectors
   ================================================================= */

.bo, body.bo {
  font-family: var(--bo-font-sans);
  color: var(--bo-text);
  font-size: var(--bo-text-base);
  line-height: var(--bo-leading-body);
  background: var(--bo-bg);
  -webkit-font-smoothing: antialiased;
}

.bo h1, .bo-h1 {
  font-family: var(--bo-font-sans);
  font-size: var(--bo-text-4xl);
  font-weight: 700;
  line-height: var(--bo-leading-tight);
  letter-spacing: var(--bo-tracking-tight);
  color: var(--bo-ink);
  margin: 0 0 var(--bo-space-5);
}
.bo h2, .bo-h2 {
  font-size: var(--bo-text-3xl);
  font-weight: 700;
  line-height: var(--bo-leading-snug);
  letter-spacing: var(--bo-tracking-tight);
  color: var(--bo-ink);
  margin: 0 0 var(--bo-space-4);
}
.bo h3, .bo-h3 {
  font-size: var(--bo-text-2xl);
  font-weight: 600;
  line-height: var(--bo-leading-snug);
  color: var(--bo-ink);
  margin: 0 0 var(--bo-space-3);
}
.bo h4, .bo-h4 {
  font-size: var(--bo-text-xl);
  font-weight: 600;
  color: var(--bo-ink);
  margin: 0 0 var(--bo-space-3);
}
.bo p, .bo-p {
  font-size: var(--bo-text-base);
  line-height: var(--bo-leading-body);
  color: var(--bo-text);
  margin: 0 0 var(--bo-space-4);
  text-wrap: pretty;
}
.bo small, .bo-small { font-size: var(--bo-text-sm); color: var(--bo-text-muted); }
.bo code, .bo-code  { font-family: var(--bo-font-mono); font-size: .92em; background: var(--bo-bg-alt); padding: 2px 6px; border-radius: var(--bo-radius-xs); }

/* The eyebrow label that sits above section headings on the site */
.bo-eyebrow {
  font-size: var(--bo-text-xs);
  font-weight: 600;
  letter-spacing: var(--bo-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bo-magenta-500);
}

/* Hand-drawn marker annotation — used to call out specific features */
.bo-mark {
  font-family: var(--bo-font-mark);
  font-weight: 700;
  color: var(--bo-magenta-500);
  font-size: 1.6em;
  line-height: 1.1;
  display: inline-block;
  transform: rotate(-3deg);
}
.bo-mark-highlight {
  background: linear-gradient(180deg, transparent 55%, rgba(230,0,126,.18) 55%);
  padding: 0 .15em;
}

/* Brand wordmark — botario is ALWAYS lowercase */
.bo-wordmark {
  font-family: var(--bo-font-sans);
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.02em;
  color: var(--bo-ink);
}