/* ============================================================
   LinkOn Chatbot — Foundations
   Color tokens, typography scale, radii, shadows, spacing.
   Import this file first in any LinkOn artifact.
   ============================================================ */

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

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Core blue — the brand. Always lean on these.            */
  --linkon-blue:        #066fbc;   /* primary brand blue       */
  --linkon-blue-600:    #0a5fa3;   /* hover / pressed          */
  --linkon-blue-700:    #084d83;   /* deeper accent            */
  --linkon-navy:        #0b2545;   /* dark text / nav bar      */
  --linkon-navy-900:    #061735;   /* deepest                  */

  /* Cyan / light blue — gradient partner */
  --linkon-cyan:        #2bb6ff;   /* bright accent            */
  --linkon-cyan-300:    #7ad4ff;   /* highlight                */
  --linkon-sky-50:      #eaf4fc;   /* tint background          */
  --linkon-sky-100:     #d4e8f8;   /* tint background          */

  /* Brand gradient (hero, CTAs, plan-of-record card) */
  --linkon-gradient:        linear-gradient(135deg, #066fbc 0%, #2bb6ff 100%);
  --linkon-gradient-soft:   linear-gradient(135deg, #eaf4fc 0%, #ffffff 100%);
  --linkon-gradient-deep:   linear-gradient(135deg, #084d83 0%, #066fbc 50%, #2bb6ff 100%);

  /* ---------- SEMANTIC / SUPPORT ---------- */
  --whatsapp-green:     #25d366;   /* WhatsApp signature       */
  --whatsapp-green-600: #128c7e;   /* WhatsApp dark            */
  --whatsapp-bubble:    #dcf8c6;   /* outgoing chat bubble     */
  --success:            #1fb866;   /* success badge / state    */
  --success-50:         #e6f8ee;
  --warning:            #f5a524;   /* free-trial / coupon flag */
  --warning-50:         #fff4dd;
  --danger:             #e5484d;
  --danger-50:          #fdebec;

  /* ---------- NEUTRALS ---------- */
  --bg:                 #ffffff;
  --bg-elev:            #ffffff;
  --bg-muted:           #f6f9fc;   /* page background tint     */
  --bg-canvas:          #f1f5fa;   /* deeper page bg           */
  --line:               #e3ebf3;   /* borders                  */
  --line-strong:        #cfd9e4;
  --fg-1:               #0b2545;   /* primary text (navy)      */
  --fg-2:               #3a4a63;   /* secondary text           */
  --fg-3:               #6b7a90;   /* tertiary / meta          */
  --fg-4:               #97a3b6;   /* placeholder              */
  --fg-on-blue:         #ffffff;
  --fg-on-blue-soft:    rgba(255,255,255,0.78);

  /* ---------- RADII ---------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;   /* default card / button radius           */
  --r-xl:   28px;   /* hero cards                              */
  --r-2xl:  36px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  /* Always soft, blue-tinted. Never harsh black.            */
  --shadow-xs:  0 1px 2px rgba(11, 37, 69, 0.06);
  --shadow-sm:  0 2px 8px rgba(11, 37, 69, 0.06);
  --shadow-md:  0 8px 24px rgba(11, 37, 69, 0.08);
  --shadow-lg:  0 18px 48px rgba(6, 111, 188, 0.14);
  --shadow-xl:  0 28px 72px rgba(6, 111, 188, 0.22);
  --shadow-blue-glow: 0 12px 36px rgba(6, 111, 188, 0.28);
  --inner-line: inset 0 0 0 1px var(--line);

  /* ---------- SPACING (4-pt scale) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Quicksand', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — landing-page tuned. */
  --t-display:  clamp(48px, 5.6vw, 76px);    /* hero          */
  --t-h1:       clamp(36px, 4vw, 52px);      /* section head  */
  --t-h2:       clamp(28px, 3vw, 38px);
  --t-h3:       22px;
  --t-h4:       18px;
  --t-body-lg:  18px;
  --t-body:     16px;
  --t-small:    14px;
  --t-meta:     13px;
  --t-eyebrow:  12px;                        /* uppercase tag */

  --lh-tight:   1.08;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;     /* eyebrows, ALL CAPS chips */
}

/* ============================================================
   Base reset + element defaults
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0 0 0.4em;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
  font-weight: 700;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--t-h4); line-height: var(--lh-snug); }

p {
  margin: 0 0 1em;
  color: var(--fg-2);
  text-wrap: pretty;
}

a {
  color: var(--linkon-blue);
  text-decoration: none;
  transition: color .15s ease;
}
a:hover { color: var(--linkon-blue-600); }

small { font-size: var(--t-small); color: var(--fg-3); }

/* ============================================================
   Semantic element classes — use these in markup directly
   ============================================================ */

.lk-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.lk-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--linkon-blue);
}

.lk-lead {
  font-size: var(--t-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.lk-meta {
  font-size: var(--t-meta);
  color: var(--fg-3);
}

/* Reusable surface */
.lk-card {
  background: var(--bg-elev);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--s-7);
}