/* ChatsHero Design System — Colors & Type
   Source: derived from chatshero website mock + logo. Brand is enterprise SaaS
   with a hero-themed mascot — blue-primary marketing, purple-gradient brand. */

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

:root {
  /* ============ COLOR TOKENS ============ */

  /* Brand — Royal Blue (primary CTA / links / focus) */
  --ch-blue-50:  #EEF3FF;
  --ch-blue-100: #DCE6FF;
  --ch-blue-200: #B7CBFF;
  --ch-blue-300: #85A8FF;
  --ch-blue-400: #5181FF;
  --ch-blue-500: #1E5BFF;   /* primary */
  --ch-blue-600: #1849D6;
  --ch-blue-700: #1339A8;
  --ch-blue-800: #102E85;
  --ch-blue-900: #0B1F5E;

  /* Brand — Purple (logo / mascot / decorative gradient) */
  --ch-purple-50:  #F5EFFF;
  --ch-purple-100: #E8DBFF;
  --ch-purple-200: #D2B7FF;
  --ch-purple-300: #B58CFF;
  --ch-purple-400: #9560F2;
  --ch-purple-500: #7B3FE4;   /* logo violet */
  --ch-purple-600: #6526C7;
  --ch-purple-700: #4F1AA0;
  --ch-purple-900: #2E0C5C;

  /* Brand — Pink (gradient endpoint, accents) */
  --ch-pink-400: #C46BE0;
  --ch-pink-500: #B947CC;

  /* Neutrals — slate-tinted, cool */
  --ch-ink-900: #0A1430;     /* darkest body text / dark sections */
  --ch-ink-800: #11203F;
  --ch-ink-700: #1F2C4F;
  --ch-ink-600: #344163;
  --ch-ink-500: #5A6685;
  --ch-ink-400: #8892AB;
  --ch-ink-300: #B6BECF;
  --ch-ink-200: #D8DCE6;
  --ch-ink-100: #ECEEF3;
  --ch-ink-50:  #F5F7FB;     /* page section bands */
  --ch-white:   #FFFFFF;

  /* Semantic */
  --ch-success: #16A34A;
  --ch-warning: #F59E0B;
  --ch-danger:  #E11D48;
  --ch-info:    var(--ch-blue-500);

  /* Channel chips (used in marketing) */
  --ch-whatsapp: #25D366;
  --ch-messenger: #0084FF;
  --ch-instagram: #E1306C;
  --ch-telegram: #229ED9;

  /* ============ SEMANTIC ALIASES ============ */
  --bg:           var(--ch-white);
  --bg-muted:     var(--ch-ink-50);
  --bg-dark:      var(--ch-ink-900);
  --surface:      var(--ch-white);
  --surface-2:    var(--ch-ink-50);
  --border:       var(--ch-ink-200);
  --border-soft:  var(--ch-ink-100);

  --fg:           var(--ch-ink-900);    /* body */
  --fg-muted:     var(--ch-ink-500);    /* secondary */
  --fg-subtle:    var(--ch-ink-400);    /* tertiary */
  --fg-inverse:   var(--ch-white);
  --fg-accent:    var(--ch-blue-500);
  --fg-on-dark:   var(--ch-white);
  --fg-on-dark-muted: rgba(255,255,255,0.7);

  --link:         var(--ch-blue-500);
  --link-hover:   var(--ch-blue-600);

  /* Brand gradient — blue → purple → pink (used in headlines, hero, mascot) */
  --gradient-brand: linear-gradient(90deg, var(--ch-blue-500) 0%, var(--ch-purple-500) 55%, var(--ch-pink-500) 100%);
  --gradient-brand-soft: linear-gradient(135deg, #EEF3FF 0%, #F5EFFF 100%);
  --gradient-hero-text: linear-gradient(90deg, #1E5BFF 0%, #7B3FE4 60%, #C46BE0 100%);

  /* ============ TYPE ============ */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — mobile-first; bump up via media queries where needed */
  --fs-display:  clamp(40px, 5.5vw, 72px);
  --fs-h1:       clamp(32px, 4vw, 52px);
  --fs-h2:       clamp(26px, 3vw, 40px);
  --fs-h3:       22px;
  --fs-h4:       18px;
  --fs-body-lg:  18px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-caption:  13px;
  --fs-eyebrow:  12px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.08em;
  --tracking-eyebrow: 0.14em;

  /* ============ 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-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ============ SHADOWS ============ */
  --shadow-xs: 0 1px 2px rgba(10, 20, 48, 0.04);
  --shadow-sm: 0 1px 3px rgba(10, 20, 48, 0.06), 0 1px 2px rgba(10,20,48,0.04);
  --shadow-md: 0 4px 12px rgba(10, 20, 48, 0.06), 0 2px 4px rgba(10,20,48,0.04);
  --shadow-lg: 0 12px 32px rgba(10, 20, 48, 0.08), 0 4px 8px rgba(10,20,48,0.04);
  --shadow-xl: 0 24px 48px rgba(10, 20, 48, 0.10), 0 8px 16px rgba(10,20,48,0.06);
  --shadow-blue: 0 8px 24px rgba(30, 91, 255, 0.25);
  --shadow-purple: 0 8px 24px rgba(123, 63, 228, 0.25);

  /* ============ MOTION ============ */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ============ SEMANTIC ELEMENT STYLES ============ */
html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-snug);
}
h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
}
p, .body { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg); }
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-normal); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); }
.caption { font-size: var(--fs-caption); color: var(--fg-muted); }
.eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-accent);
}
code, .code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ch-ink-50);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}

a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--link-hover); }

/* Gradient text utility — used for the second line of marketing headlines */
.text-gradient {
  background: var(--gradient-hero-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Pill badge — lifted from "OUR MISSION", "FLEXIBLE PLANS" eyebrow chips */
.pill-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--ch-blue-50);
  color: var(--ch-blue-600);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}