/* Globby Design System — colors, type, spacing, radii, shadows
 * Sampled from theglobby.com hero (April 2026)
 */

/* ---- Webfonts (Google Fonts substitute — see README) ---- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* === COLOR — Primary brand === */
  --gb-violet:           #6E39F0;   /* logo mark, in-app primary */
  --gb-violet-deep:      #3A1D6D;   /* logotype, hover-darken */
  --gb-violet-50:        #F4EFFE;
  --gb-violet-100:       #E5DAFC;
  --gb-violet-200:       #C9B0F8;
  --gb-violet-500:       #6E39F0;
  --gb-violet-600:       #5B22DC;
  --gb-violet-700:       #4818B0;
  --gb-violet-900:       #3A1D6D;

  /* === COLOR — Emerald (marketing CTA + chart) === */
  --gb-emerald:          #065F46;   /* CTA bg ("Get Started", "Download the App") */
  --gb-emerald-hover:    #054937;
  --gb-emerald-500:      #10B981;   /* eyebrows, links, accents */
  --gb-emerald-600:      #059669;
  --gb-emerald-100:      #D1FAE5;
  --gb-emerald-50:       #ECFDF5;   /* hero gradient end-stop, tag pills */

  /* === COLOR — Ink / neutrals (Tailwind slate-aligned) === */
  --gb-ink:              #020617;   /* H1 black */
  --gb-ink-900:          #0F172A;
  --gb-ink-800:          #1E293B;
  --gb-ink-700:          #334155;
  --gb-ink-600:          #475569;   /* body */
  --gb-ink-500:          #64748B;
  --gb-ink-400:          #94A3B8;
  --gb-ink-300:          #CBD5E1;
  --gb-ink-200:          #E2E8F0;
  --gb-ink-100:          #F1F5F9;
  --gb-ink-50:           #F8FAFC;

  /* === COLOR — Surface === */
  --gb-surface:          #FFFFFF;
  --gb-surface-alt:      #FAFAFA;
  --gb-border:           #E5E7EB;
  --gb-border-mint:      #D1FAE5;

  /* === COLOR — Semantic === */
  --gb-success:          #10B981;
  --gb-warning:          #F59E0B;
  --gb-danger:           #EF4444;
  --gb-info:             #6E39F0;

  /* === Foreground tokens === */
  --fg-1:                var(--gb-ink);        /* primary heading */
  --fg-2:                var(--gb-ink-900);    /* secondary heading */
  --fg-3:                var(--gb-ink-600);    /* body */
  --fg-4:                var(--gb-ink-400);    /* muted */
  --fg-on-violet:        #FFFFFF;
  --fg-on-emerald:       #FFFFFF;
  --fg-link:             var(--gb-emerald-500);
  --fg-link-hover:       var(--gb-emerald);

  /* === Background tokens === */
  --bg-app:              var(--gb-surface);
  --bg-section:          var(--gb-surface);
  --bg-section-mint:     linear-gradient(180deg, #FFFFFF 0%, var(--gb-emerald-50) 100%);
  --bg-card:             var(--gb-surface);
  --bg-card-mint:        var(--gb-emerald-50);
  --bg-pill-mint:        var(--gb-emerald-50);

  /* === TYPE === */
  --font-sans:           'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:        'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:           'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — desktop */
  --fs-display:          64px;   /* H1 hero */
  --fs-h1:               48px;
  --fs-h2:               40px;   /* "Let Globby Handle the Sales Workload" */
  --fs-h3:               28px;
  --fs-h4:               22px;
  --fs-lead:             18px;   /* hero body */
  --fs-body:             16px;
  --fs-small:            14px;
  --fs-eyebrow:          13px;   /* "FEATURES" */
  --fs-caption:          12px;

  --fw-regular:          400;
  --fw-medium:           500;
  --fw-semibold:         600;
  --fw-bold:             700;
  --fw-black:            800;

  --lh-tight:            1.05;   /* display */
  --lh-snug:             1.2;
  --lh-normal:           1.5;
  --lh-relaxed:          1.6;    /* body */

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

  /* === SPACING (4px base) === */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* === RADII === */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   10px;   /* buttons, inputs */
  --r-lg:   16px;   /* cards */
  --r-xl:   24px;   /* hero cards, phone-mockup frame */
  --r-pill: 9999px;

  /* === SHADOWS === */
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:  0 2px 6px -2px rgba(15, 23, 42, 0.06);
  --shadow-md:  0 4px 16px -8px rgba(15, 23, 42, 0.08);
  --shadow-lg:  0 10px 40px -10px rgba(15, 23, 42, 0.10);
  --shadow-xl:  0 20px 60px -20px rgba(15, 23, 42, 0.14);
  --shadow-violet: 0 8px 24px -8px rgba(110, 57, 240, 0.40);
  --shadow-emerald: 0 8px 24px -8px rgba(6, 95, 70, 0.30);

  /* === MOTION === */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      320ms;

  /* === LAYOUT === */
  --container-max: 1200px;
  --container-pad: 24px;
}

/* === SEMANTIC ELEMENT STYLES === */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-3);
  background: var(--bg-app);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-2);
  margin: 0;
}

h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-2);
  margin: 0;
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-3);
  margin: 0;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--fg-3);
}

.small  { font-size: var(--fs-small); }
.caption{ font-size: var(--fs-caption); color: var(--fg-4); }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gb-emerald-500);
}

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

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1;
  border: none;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.btn:active { transform: scale(0.97); }

.btn-primary-emerald {
  background: var(--gb-emerald);
  color: var(--fg-on-emerald);
}
.btn-primary-emerald:hover { background: var(--gb-emerald-hover); }

.btn-primary-violet {
  background: var(--gb-violet);
  color: var(--fg-on-violet);
}
.btn-primary-violet:hover { background: var(--gb-violet-600); }

.btn-secondary {
  background: var(--gb-surface);
  color: var(--gb-ink-900);
  border: 1px solid var(--gb-border);
}
.btn-secondary:hover { background: var(--gb-ink-50); }

.btn-ghost {
  background: transparent;
  color: var(--gb-emerald);
  font-weight: var(--fw-bold);
}
.btn-ghost:hover { color: var(--gb-emerald-hover); }

/* === PILL / TAG === */
.pill-mint {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--bg-pill-mint);
  color: var(--gb-emerald);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

/* === CARDS === */
.card {
  background: var(--bg-card);
  border: 1px solid var(--gb-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--sp-5);
}
.card-mint {
  background: var(--bg-card-mint);
  border-radius: var(--r-xl);
  padding: var(--sp-7);
}

/* === INPUTS === */
.input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--gb-border);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--gb-ink-900);
  background: var(--gb-surface);
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.input:focus {
  outline: none;
  border-color: var(--gb-violet);
  box-shadow: 0 0 0 3px rgba(110, 57, 240, 0.15);
}

/* === GRADIENT SECTIONS === */
.bg-mint-wash { background: var(--bg-section-mint); }