/* ============================================================
   FULL SEND — Colors & Type Foundations
   ============================================================
   Brand: Full Send (thefullsend.com) — outsourced accounting,
   fractional CFO, data, automation & AI for $1M–$20M SMBs.
   Boulder, Colorado.

   Color values are sampled directly from the official
   "Full Send Style Guide.pdf" vector artwork (exact hexes).

   FONTS ARE SUBSTITUTIONS (flagged). The brand wordmark + site
   use custom/self-hosted faces we could not extract or license.
   Archivo / Hanken Grotesk / IBM Plex Mono are close Google
   Fonts stand-ins. Swap in the real font files when available.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- CORE BRAND ---------- */
  --fs-navy:        #001E57;  /* primary — "Sendville Navy" */
  --fs-navy-deep:   #091C4C;  /* deepest, near-black navy */
  --fs-navy-800:    #122A5E;
  --fs-navy-700:    #133169;
  --fs-navy-600:    #2A3E73;
  --fs-navy-500:    #454F78;  /* muted navy-slate */

  /* ---------- THE SPECTRUM (chevron sweep) ---------- */
  --fs-cyan:        #12E2F3;  /* chevron start */
  --fs-blue:        #0083E2;  /* signal blue */
  --fs-electric:    #0047FF;  /* electric / link blue */
  --fs-magenta:     #E11D60;  /* chevron mid */
  --fs-red:         #EF3A14;  /* alert red-orange */
  --fs-orange:      #F48218;  /* chevron end */
  --fs-yellow:      #F2DA01;  /* highlight yellow */

  /* Signature brand gradient (matches the 4-chevron isotype) */
  --fs-gradient: linear-gradient(105deg, #14CBEC 0%, #1E72D2 32%, #E11D60 66%, #F48218 100%); /* @kind color */
  --fs-gradient-soft: linear-gradient(105deg, #12E2F3 0%, #0083E2 45%, #E11D60 80%, #F48218 100%); /* @kind color */

  /* ---------- NEUTRALS (navy-tinted, cool) ---------- */
  --fs-ink:         #0B1A3C;  /* body text on light */
  --fs-fg-1:        #001E57;  /* headings */
  --fs-fg-2:        #454F78;  /* secondary text */
  --fs-fg-3:        #7C84A3;  /* tertiary / captions */
  --fs-fg-4:        #A7AEC6;  /* disabled */

  --fs-white:       #FFFFFF;
  --fs-bg:          #FFFFFF;
  --fs-bg-tint:     #F4F6FC;  /* faint periwinkle wash */
  --fs-bg-tint-2:   #EAEEF8;
  --fs-periwinkle:  #D2D8ED;  /* signature light lavender */
  --fs-periwinkle-2:#BFCDFF;
  --fs-line:        #DCE2F1;  /* hairline border */
  --fs-line-strong: #C3CBE2;

  /* On-navy foreground ramp */
  --fs-on-navy-1:   #FFFFFF;
  --fs-on-navy-2:   #C9D2EC;  /* periwinkle text on navy */
  --fs-on-navy-3:   #8893BE;

  /* ---------- SEMANTIC ---------- */
  --fs-info:        #0083E2;
  --fs-info-bg:     #E5F1FC;
  --fs-success:     #1B9E6A;  /* derived — not in source palette (flag) */
  --fs-success-bg:  #E2F4EC;
  --fs-warning:     #F48218;
  --fs-warning-bg:  #FDECDB;
  --fs-danger:      #EF3A14;
  --fs-danger-bg:   #FCE4DE;

  /* ---------- TYPE FAMILIES (substituted — see header) ---------- */
  --fs-font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --fs-font-sans:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --fs-font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-text-xs:   12px;
  --fs-text-sm:   14px;
  --fs-text-base: 16px;
  --fs-text-md:   18px;
  --fs-text-lg:   21px;
  --fs-text-xl:   26px;
  --fs-text-2xl:  33px;
  --fs-text-3xl:  42px;
  --fs-text-4xl:  54px;
  --fs-text-5xl:  68px;
  --fs-text-6xl:  88px;

  --fs-leading-tight: 1.04;
  --fs-leading-snug:  1.18;
  --fs-leading-body:  1.55;

  /* ---------- RADII ---------- */
  --fs-radius-xs:  4px;
  --fs-radius-sm:  8px;
  --fs-radius-md:  12px;
  --fs-radius-lg:  18px;
  --fs-radius-xl:  28px;
  --fs-radius-pill: 999px;

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

  /* ---------- ELEVATION ---------- */
  --fs-shadow-sm: 0 1px 2px rgba(0,30,87,.08), 0 1px 3px rgba(0,30,87,.06);
  --fs-shadow-md: 0 6px 16px rgba(0,30,87,.10), 0 2px 6px rgba(0,30,87,.06);
  --fs-shadow-lg: 0 18px 48px rgba(0,30,87,.16), 0 6px 16px rgba(0,30,87,.08);
  --fs-shadow-navy: 0 20px 50px rgba(0,30,87,.40);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — opt in via .fs-prose or use vars
   ============================================================ */
.fs-display, .fs-h0 {
  font-family: var(--fs-font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: var(--fs-leading-tight);
  color: var(--fs-fg-1);
}
.fs-h1 { font-family: var(--fs-font-display); font-weight: 800; font-size: var(--fs-text-5xl); line-height: var(--fs-leading-tight); letter-spacing: -0.02em; color: var(--fs-fg-1); }
.fs-h2 { font-family: var(--fs-font-display); font-weight: 700; font-size: var(--fs-text-3xl); line-height: var(--fs-leading-snug); letter-spacing: -0.015em; color: var(--fs-fg-1); }
.fs-h3 { font-family: var(--fs-font-sans); font-weight: 700; font-size: var(--fs-text-xl); line-height: var(--fs-leading-snug); letter-spacing: -0.01em; color: var(--fs-fg-1); }
.fs-h4 { font-family: var(--fs-font-sans); font-weight: 600; font-size: var(--fs-text-lg); line-height: var(--fs-leading-snug); color: var(--fs-fg-1); }

/* Uppercase eyebrow / kicker — echoes the wordmark's wide caps */
.fs-eyebrow {
  font-family: var(--fs-font-mono);
  font-weight: 500;
  font-size: var(--fs-text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fs-blue);
}

.fs-body  { font-family: var(--fs-font-sans); font-weight: 400; font-size: var(--fs-text-base); line-height: var(--fs-leading-body); color: var(--fs-ink); }
.fs-lead  { font-family: var(--fs-font-sans); font-weight: 400; font-size: var(--fs-text-lg); line-height: 1.5; color: var(--fs-fg-2); }
.fs-small { font-size: var(--fs-text-sm); color: var(--fs-fg-3); }

/* Monospace figures — tabular financial numbers */
.fs-figure {
  font-family: var(--fs-font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--fs-fg-1);
}

.fs-gradient-text {
  background: var(--fs-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}