/* ============================================================
   BLUESOFT MARKETING — Design System Foundations
   Colors + Typography tokens (base + semantic)
   Brand: Arizona sky blue + deep navy, warm desert accents.
   ============================================================ */

/* Fonts loaded non-blocking from Google Fonts via head snippet
   (Display: Outfit · Body: Manrope). */
:root {
  /* ---------- BRAND CORE ---------- */
  --yb-blue:        #0C5EBD;  /* primary — BlueSoft sky blue */
  --yb-blue-600:    #0A4F9F;  /* hover / pressed */
  --yb-blue-700:    #083F80;
  --yb-blue-300:    #6BA3E0;  /* tints */
  --yb-blue-100:    #E3EFFA;
  --yb-cornflower:  #0C5EBD;
  --yb-navy:        #0E2449;  /* ink / dark sections */
  --yb-navy-800:    #122B56;
  --yb-navy-700:    #1A3A6E;

  /* ---------- BRIGHT ACCENTS (service spectrum) ---------- */
  --yb-cyan:    #19B5E0;  /* SEO / search — desert sky */
  --yb-violet:  #5B6FE8;  /* branding — cooler indigo (less purple) */
  --yb-coral:   #E86A45;  /* PPC — warm canyon */
  --yb-amber:   #E8A23A;  /* social — sand */
  --yb-mint:    #1FAF7A;  /* web design */
  --yb-pink:    #D45B8C;  /* content / CRM */

  /* tinted accent backgrounds (10–14% wash) */
  --wash-blue:   #E8F1FB;
  --wash-cyan:   #E3F6FC;
  --wash-violet: #EBEDFB;
  --wash-coral:  #FCEEE9;
  --wash-amber:  #FBF3E4;
  --wash-mint:   #E3F7F0;
  --wash-pink:   #F9EAF1;

  /* ---------- NEUTRALS ---------- */
  --ink:      #0E2449;
  --fg1:      #0E2449;
  --fg2:      #445572;
  --fg3:      #75839A;
  --fg-on-dark:    #FFFFFF;
  --fg2-on-dark:   #B4C3DA;

  --bg:       #FFFFFF;
  --bg-soft:  #F5F8FC;
  --bg-mute:  #EAF0F7;
  --surface:  #FFFFFF;
  --line:     #DCE5F0;
  --line-strong: #C5D2E3;

  /* ---------- GRADIENTS ---------- */
  --grad-brand:  linear-gradient(135deg, #0C5EBD 0%, #19B5E0 100%);
  --grad-sunset: linear-gradient(135deg, #E86A45 0%, #E8A23A 100%);
  --grad-violet: linear-gradient(135deg, #5B6FE8 0%, #0C5EBD 100%);
  --grad-navy:   linear-gradient(165deg, #122B56 0%, #0A1A36 60%, #0E2449 100%);
  --grad-mesh:   radial-gradient(circle at 18% 20%, #0C5EBD33 0, transparent 42%),
                 radial-gradient(circle at 82% 12%, #19B5E033 0, transparent 38%),
                 radial-gradient(circle at 70% 88%, #E8A23A22 0, transparent 45%);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;

  /* ---------- TYPE SCALE (fluid) ---------- */
  --fs-display: clamp(2.75rem, 5.5vw, 4.75rem);
  --fs-h1:      clamp(2.25rem, 4vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 2.6vw, 2.5rem);
  --fs-h3:      clamp(1.3rem, 1.7vw, 1.6rem);
  --fs-h4:      1.15rem;
  --fs-lead:    clamp(1.1rem, 1.4vw, 1.3rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;
  --fs-eyebrow: 0.8125rem;

  /* ---------- WEIGHTS / LEADING / TRACKING ---------- */
  --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700; --w-x: 800;
  --lh-tight: 1.05;
  --lh-snug:  1.18;
  --lh-body:  1.65;
  --tr-tight: -0.02em;
  --tr-eyebrow: 0.14em;

  /* ---------- RADII ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---------- SHADOWS / ELEVATION ---------- */
  --sh-xs: 0 1px 2px rgba(14,36,73,.06);
  --sh-sm: 0 2px 8px rgba(14,36,73,.07);
  --sh-md: 0 10px 28px -8px rgba(14,36,73,.16);
  --sh-lg: 0 24px 56px -16px rgba(14,36,73,.22);
  --sh-blue: 0 14px 30px -10px rgba(12,94,189,.45);
  --sh-coral: 0 14px 30px -10px rgba(232,106,69,.42);

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

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 480ms;

  --container: 1200px;
}


/* ============================================================
   SEMANTIC ELEMENT STYLES — apply via classes or scope to .yb
   ============================================================ */

.yb-display {
  font-family: var(--font-display);
  font-weight: var(--w-x);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
}

h1, .yb-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
}

h2, .yb-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
}

h3, .yb-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--ink);
}

h4, .yb-h4 {
  font-family: var(--font-body);
  font-weight: var(--w-bold);
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--ink);
}

.yb-lead {
  font-family: var(--font-body);
  font-weight: var(--w-reg);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--fg2);
}

p, .yb-body {
  font-family: var(--font-body);
  font-weight: var(--w-reg);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg2);
}

.yb-small { font-size: var(--fs-sm); line-height: 1.55; color: var(--fg2); }
.yb-caption { font-size: var(--fs-xs); color: var(--fg3); }

.yb-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--w-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--yb-blue);
}

/* gradient text helper */
.yb-grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}