/* ============================================================
   BrightBubbles — Colors & Type Tokens
   Derived from the logo SVG gradient (#2588c9 → #5dc0ee) and
   the rounded, friendly wordmark.
   ============================================================ */

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

:root {
  /* ---------- BRAND — Blue (primary gradient) ---------- */
  --bb-blue-50:  #eaf6fd;
  --bb-blue-100: #d4edfb;
  --bb-blue-200: #a9dbf6;
  --bb-blue-300: #7ec9f2;
  --bb-blue-400: #5dc0ee;  /* gradient END — sky */
  --bb-blue-500: #3aa4dc;
  --bb-blue-600: #2588c9;  /* gradient START — ocean (core) */
  --bb-blue-700: #1d6ea3;
  --bb-blue-800: #16547d;
  --bb-blue-900: #0f3a57;

  /* The signature gradient */
  --bb-gradient: linear-gradient(135deg, #2588c9 0%, #5dc0ee 100%); /* @kind color */
  --bb-gradient-horizontal: linear-gradient(90deg, #2588c9 0%, #5dc0ee 100%); /* @kind color */
  --bb-gradient-radial: radial-gradient(circle at 30% 20%, #5dc0ee 0%, #2588c9 80%); /* @kind color */

  /* ---------- NEUTRALS — warm-cool greys ---------- */
  --bb-white:    #ffffff;
  --bb-grey-50:  #f7fafc;
  --bb-grey-100: #eef3f7;
  --bb-grey-200: #dde5ed;
  --bb-grey-300: #c3cfda;
  --bb-grey-400: #9aa8b7;
  --bb-grey-500: #6b7a8b;
  --bb-grey-600: #4a5866;
  --bb-grey-700: #324049;
  --bb-grey-800: #1f2930;
  --bb-grey-900: #0f1519;

  /* ---------- SEMANTIC — accent colors ---------- */
  --bb-success: #3fb98b;
  --bb-success-bg: #e4f6ee;
  --bb-warning: #f2b23a;
  --bb-warning-bg: #fdf2d9;
  --bb-danger:  #e26363;
  --bb-danger-bg: #fbe6e6;
  --bb-info:    var(--bb-blue-500);
  --bb-info-bg: var(--bb-blue-50);

  /* Sparkle accent — a soft cyan highlight used sparingly */
  --bb-sparkle: #c7ecff;

  /* ---------- FOREGROUND / BACKGROUND SEMANTIC ---------- */
  --bb-fg-1: var(--bb-grey-900);    /* Primary text */
  --bb-fg-2: var(--bb-grey-700);    /* Secondary text */
  --bb-fg-3: var(--bb-grey-500);    /* Muted / meta */
  --bb-fg-4: var(--bb-grey-400);    /* Placeholder */
  --bb-fg-onbrand: var(--bb-white); /* Text on blue gradient */

  --bb-bg-1: var(--bb-white);       /* Page */
  --bb-bg-2: var(--bb-grey-50);     /* Subtle panel */
  --bb-bg-3: var(--bb-grey-100);    /* Card alt */
  --bb-bg-brand-soft: var(--bb-blue-50);

  --bb-border-1: var(--bb-grey-200);
  --bb-border-2: var(--bb-grey-300);
  --bb-border-brand: var(--bb-blue-400);

  /* ---------- SHADOWS ---------- */
  --bb-shadow-xs: 0 1px 2px rgba(37, 136, 201, 0.06);
  --bb-shadow-sm: 0 2px 6px rgba(37, 136, 201, 0.08), 0 1px 2px rgba(15, 21, 25, 0.04);
  --bb-shadow-md: 0 6px 18px rgba(37, 136, 201, 0.10), 0 2px 4px rgba(15, 21, 25, 0.04);
  --bb-shadow-lg: 0 16px 38px rgba(37, 136, 201, 0.16), 0 4px 10px rgba(15, 21, 25, 0.05);
  --bb-shadow-xl: 0 28px 70px rgba(37, 136, 201, 0.22), 0 8px 20px rgba(15, 21, 25, 0.06);
  --bb-shadow-glow: 0 0 0 4px rgba(93, 192, 238, 0.25); /* focus ring */
  --bb-shadow-inset: inset 0 1px 2px rgba(15, 21, 25, 0.06);

  /* ---------- RADIUS — rounded + friendly ---------- */
  --bb-radius-xs: 4px;
  --bb-radius-sm: 8px;
  --bb-radius-md: 12px;
  --bb-radius-lg: 18px;
  --bb-radius-xl: 24px;
  --bb-radius-2xl: 32px;
  --bb-radius-pill: 999px;
  --bb-radius-bubble: 50%;  /* true circle — used for iconic bubble shapes */

  /* ---------- SPACING (4px base) ---------- */
  --bb-space-1: 4px;
  --bb-space-2: 8px;
  --bb-space-3: 12px;
  --bb-space-4: 16px;
  --bb-space-5: 20px;
  --bb-space-6: 24px;
  --bb-space-8: 32px;
  --bb-space-10: 40px;
  --bb-space-12: 48px;
  --bb-space-16: 64px;
  --bb-space-20: 80px;
  --bb-space-24: 96px;

  /* ---------- TYPE — families ---------- */
  --bb-font-display: 'Quicksand', ui-rounded, 'SF Pro Rounded', 'Helvetica Neue', system-ui, sans-serif;
  --bb-font-body:    'Nunito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bb-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE — scale ---------- */
  --bb-text-xs:   12px;
  --bb-text-sm:   14px;
  --bb-text-base: 16px;
  --bb-text-md:   18px;
  --bb-text-lg:   20px;
  --bb-text-xl:   24px;
  --bb-text-2xl:  30px;
  --bb-text-3xl:  38px;
  --bb-text-4xl:  48px;
  --bb-text-5xl:  60px;
  --bb-text-6xl:  76px;

  --bb-leading-tight: 1.15;
  --bb-leading-snug:  1.35;
  --bb-leading-body:  1.55;
  --bb-leading-loose: 1.75;

  --bb-tracking-tight:  -0.02em;
  --bb-tracking-normal: 0;
  --bb-tracking-wide:   0.06em;

  /* ---------- MOTION ---------- */
  --bb-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --bb-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --bb-dur-fast:   120ms; /* @kind other */
  --bb-dur-base:   220ms; /* @kind other */
  --bb-dur-slow:   420ms; /* @kind other */
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

.bb-display-1 {
  font-family: var(--bb-font-display);
  font-weight: 700;
  font-size: var(--bb-text-6xl);
  line-height: var(--bb-leading-tight);
  letter-spacing: var(--bb-tracking-tight);
  color: var(--bb-fg-1);
}
.bb-display-2 {
  font-family: var(--bb-font-display);
  font-weight: 700;
  font-size: var(--bb-text-5xl);
  line-height: var(--bb-leading-tight);
  letter-spacing: var(--bb-tracking-tight);
  color: var(--bb-fg-1);
}
.bb-h1 {
  font-family: var(--bb-font-display);
  font-weight: 700;
  font-size: var(--bb-text-4xl);
  line-height: var(--bb-leading-tight);
  letter-spacing: var(--bb-tracking-tight);
  color: var(--bb-fg-1);
}
.bb-h2 {
  font-family: var(--bb-font-display);
  font-weight: 600;
  font-size: var(--bb-text-3xl);
  line-height: var(--bb-leading-snug);
  color: var(--bb-fg-1);
}
.bb-h3 {
  font-family: var(--bb-font-display);
  font-weight: 600;
  font-size: var(--bb-text-2xl);
  line-height: var(--bb-leading-snug);
  color: var(--bb-fg-1);
}
.bb-h4 {
  font-family: var(--bb-font-display);
  font-weight: 600;
  font-size: var(--bb-text-xl);
  line-height: var(--bb-leading-snug);
  color: var(--bb-fg-1);
}
.bb-eyebrow {
  font-family: var(--bb-font-body);
  font-weight: 700;
  font-size: var(--bb-text-xs);
  line-height: 1;
  letter-spacing: var(--bb-tracking-wide);
  text-transform: uppercase;
  color: var(--bb-blue-600);
}
.bb-lead {
  font-family: var(--bb-font-body);
  font-weight: 400;
  font-size: var(--bb-text-lg);
  line-height: var(--bb-leading-body);
  color: var(--bb-fg-2);
}
.bb-p {
  font-family: var(--bb-font-body);
  font-weight: 400;
  font-size: var(--bb-text-base);
  line-height: var(--bb-leading-body);
  color: var(--bb-fg-2);
}
.bb-small {
  font-family: var(--bb-font-body);
  font-weight: 400;
  font-size: var(--bb-text-sm);
  line-height: var(--bb-leading-body);
  color: var(--bb-fg-3);
}
.bb-caption {
  font-family: var(--bb-font-body);
  font-weight: 500;
  font-size: var(--bb-text-xs);
  line-height: var(--bb-leading-snug);
  color: var(--bb-fg-3);
}
.bb-code {
  font-family: var(--bb-font-mono);
  font-size: 0.9em;
  background: var(--bb-grey-100);
  color: var(--bb-blue-700);
  padding: 2px 6px;
  border-radius: var(--bb-radius-xs);
}