/* =============================================================
   BLEND DESIGN SYSTEM — colors_and_type.css
   Source: itsblend.studio + supplied brand badges
   ============================================================= */

/* ---------- FONTS ----------
   Blend's wordmark is a custom chunky rounded display.
   Closest free match on Google Fonts: Fredoka (display / wordmark)
   Body: Inter (neutral, safe). Mono: JetBrains Mono.
   TODO: replace @import with self-hosted brand font files when available.
*/
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&family=Caveat:wght@500;700&display=swap');

:root {
  /* ===== CORE PALETTE (from logo + shape tiles on itsblend.studio) ===== */
  --blend-yellow:  #FDCD03;  /* primary drop / highlight */
  --blend-orange:  #FF7403;  /* accent / underline */
  --blend-green:   #13A454;  /* arch + crew pill */
  --blend-blue:    #2457E5;  /* figure / CTA */
  --blend-pink:    #F7B6C2;  /* eye / soft accent */
  --blend-red:     #E8442C;  /* alt warm accent */

  /* ===== NEUTRALS ===== */
  --blend-cream:   #FFF8E8;  /* primary light background */
  --blend-cream-2: #F5EEDA;  /* secondary / card */
  --blend-ink:     #2D2D2D;  /* primary text */
  --blend-ink-2:   #5C5C5C;  /* secondary text */
  --blend-ink-3:   #8A8A8A;  /* muted text */
  --blend-line:    #2D2D2D;  /* hard rule / border */
  --blend-black:   #0F0F0F;  /* dark surface */
  --blend-white:   #FFFFFF;

  /* ===== SEMANTIC FG / BG ===== */
  --bg:            var(--blend-cream);
  --bg-2:          var(--blend-cream-2);
  --bg-dark:       var(--blend-black);
  --fg1:           var(--blend-ink);
  --fg2:           var(--blend-ink-2);
  --fg3:           var(--blend-ink-3);
  --fg-inverse:    var(--blend-cream);
  --border:        var(--blend-ink);
  --border-soft:   rgba(45,45,45,0.12);
  --focus:         var(--blend-orange);

  /* ===== STATUS ===== */
  --ok:       var(--blend-green);
  --warn:     var(--blend-yellow);
  --danger:   var(--blend-red);
  --info:     var(--blend-blue);

  /* ===== TYPE FAMILIES ===== */
  --font-display: 'Fredoka', 'Baloo 2', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-hand:    'Caveat', 'Comic Sans MS', cursive;  /* for scribble captions */

  /* ===== TYPE SCALE (1.25 major third, display is chunkier) ===== */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;   /* hero */
  --fs-6xl:  120px;  /* mega hero */

  /* ===== RADII — Blend UI uses soft-brick radii 8-16, pills 999 ===== */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

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

  /* ===== SHADOWS — Blend has a signature "hard stack" shadow (solid offset) ===== */
  --shadow-hard-sm: 3px 3px 0 0 var(--blend-ink);
  --shadow-hard:    5px 5px 0 0 var(--blend-ink);
  --shadow-hard-lg: 8px 8px 0 0 var(--blend-ink);
  --shadow-soft-sm: 0 2px 8px rgba(45,45,45,0.06);
  --shadow-soft:    0 8px 24px rgba(45,45,45,0.08);
  --shadow-pop:     0 12px 40px rgba(36,87,229,0.18);

  /* ===== BORDERS ===== */
  --bw-thin:  1.5px;
  --bw:       2px;
  --bw-thick: 3px;

  /* ===== MOTION ===== */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  120ms;
  --dur-med:   220ms;
  --dur-slow:  420ms;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   ============================================================ */
html { color: var(--fg1); background: var(--bg); font-family: var(--font-body); }

.blend-display,
h1.blend, .blend-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(44px, 6vw, var(--fs-5xl));
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--fg1);
}

h2.blend, .blend-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, var(--fs-3xl));
  line-height: 1.02;
  letter-spacing: -0.015em;
}

h3.blend, .blend-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h4.blend, .blend-h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.blend-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg2);
}

.blend-body, p.blend {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--fg1);
  text-wrap: pretty;
}

.blend-body-sm { font-size: var(--fs-sm); line-height: 1.5; color: var(--fg2); }

.blend-caption {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg3);
}

.blend-hand {                         /* handwritten tagline / scribble label */
  font-family: var(--font-hand);
  font-weight: 700;
  color: var(--blend-orange);
  font-size: var(--fs-xl);
  transform: rotate(-4deg);
  display: inline-block;
}

.blend-mono { font-family: var(--font-mono); font-size: var(--fs-sm); }

/* ============================================================
   SIGNATURE BITS
   ============================================================ */

/* Orange squiggle underline using the brand svg */
.blend-underline {
  background-image: url("assets/vector-underline.svg");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.35em;
  padding-bottom: 0.15em;
}

/* Little "crew"-style pill (green outline, white fill, used under logo) */
.blend-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  background: var(--blend-white);
  border: 2px solid var(--blend-green);
  color: var(--blend-green);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
}

/* Block shadow button */
.blend-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border: var(--bw) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--blend-yellow);
  color: var(--blend-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  box-shadow: var(--shadow-hard);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  cursor: pointer;
  text-decoration: none;
}
.blend-btn:hover  { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 0 var(--blend-ink); }
.blend-btn:active { transform: translate(3px,3px);  box-shadow: 1px 1px 0 0 var(--blend-ink); }
.blend-btn--orange { background: var(--blend-orange); color: var(--blend-cream); }
.blend-btn--blue   { background: var(--blend-blue);   color: var(--blend-cream); }
.blend-btn--green  { background: var(--blend-green);  color: var(--blend-cream); }
.blend-btn--ghost  { background: transparent; }