/* ============================================================
   smallbiz.design — Brand Tokens
   Palette: Electric Yellow + Ink Navy (Option A)
   Fonts: Nunito (display) + Plus Jakarta Sans (body)
   ============================================================ */

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

/* ────────────────────────────────────────────────────────────
   Design Tokens
   ──────────────────────────────────────────────────────────── */
:root {
  /* — Color: backgrounds & surfaces — */
  --c-bg:      #FAFAFA;  /* canvas white — default page bg */
  --c-paper:   #FFFFFF;  /* pure white — cards, forms, elevated surfaces */
  --c-surface: #F2F4F8;  /* ghost — subtle section fills, dividers */
  --c-border:  #E1E6EF;  /* feather — borders, outlines */

  /* — Color: text — */
  --c-ink:     #0D1526;  /* deep ink navy — headings + body */
  --c-muted:   #5E6A80;  /* pewter — supporting text, captions, placeholders */

  /* — Color: accent / brand pops — */
  --c-accent:     #FFE617;  /* electric yellow — primary pop: CTA bg, highlights, stickers */
  --c-accent-ink: #0D1526;  /* readable text ON --c-accent (contrast 13.5:1 ✅ AAA) */
  --c-accent-2:   #FF5C35;  /* coral punch — secondary: badges, pricing, urgency CTAs */
  --c-pop:        #00D6A4;  /* mint zap — tertiary: success states, decorative fills */

  /* — Typography — */
  --font-display: 'Nunito', ui-rounded, system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;

  /* — Type scale — */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.375rem;   /* 22px */
  --text-xl:   1.75rem;    /* 28px */
  --text-2xl:  2.25rem;    /* 36px */
  --text-3xl:  3.25rem;    /* 52px */
  --text-hero: clamp(3.5rem, 8vw, 6.25rem); /* 56–100px */

  /* — Spacing (8px base) — */
  --space:    1rem;       /* 16px — base spacing unit */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* — Border radius — */
  --radius:    10px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* — Layout — */
  --maxw: 1100px;

  /* — Motion / easing — */
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);  /* springy overshoot — hover/press */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);     /* snappy deceleration — entrances */
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);     /* smooth — color/opacity shifts */

  /* — Shadows — */
  --shadow: 0 4px 16px -2px rgba(13, 21, 38, 0.10), 0 1px 4px -1px rgba(13, 21, 38, 0.07);
  --shadow-pop: 0 8px 28px -4px rgba(13, 21, 38, 0.16), 0 2px 8px -2px rgba(13, 21, 38, 0.10);
  --shadow-accent: 0 6px 24px -4px rgba(255, 230, 23, 0.45);
}


/* ────────────────────────────────────────────────────────────
   Brand Utility Classes
   ──────────────────────────────────────────────────────────── */

/* .btn-mesh — mesh/multi-stop gradient button
   Usage: <button class="btn btn-mesh">Start your project</button>
   Pairs with a .btn base class that sets padding/radius/font. */
.btn-mesh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-base);
  line-height: 1;
  color: var(--c-accent-ink);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  /* Multi-stop mesh gradient: yellow → yellow-warm → coral-hint */
  background: linear-gradient(
    135deg,
    #FFE617 0%,
    #FFD000 35%,
    #FFBA00 62%,
    #FF8A35 100%
  );
  box-shadow: var(--shadow-accent);
  transition:
    transform 180ms var(--ease-spring),
    box-shadow 180ms var(--ease-out),
    filter 180ms var(--ease-out);
}

.btn-mesh::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.04) 50%,
    rgba(0, 0, 0, 0.05) 100%
  );
  border-radius: inherit;
  pointer-events: none;
}

.btn-mesh:hover {
  transform: scale(1.04) translateY(-1px);
  box-shadow: var(--shadow-pop), var(--shadow-accent);
  filter: brightness(1.06);
}

.btn-mesh:active {
  transform: scale(0.97) translateY(0);
  box-shadow: var(--shadow);
  filter: brightness(0.98);
}

.btn-mesh:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
}


/* .bg-dots — CSS-only dot pattern via radial-gradient
   Usage: add class to any section/div that needs a subtle dot fill.
   Inherits background-color from parent; dots layer on top. */
.bg-dots {
  background-image: radial-gradient(
    circle,
    rgba(13, 21, 38, 0.10) 1.5px,
    transparent 1.5px
  );
  background-size: 22px 22px;
  background-position: 0 0;
}

/* On --c-surface backgrounds, dots are barely there — tasteful */
.bg-dots.on-surface {
  background-image: radial-gradient(
    circle,
    rgba(13, 21, 38, 0.07) 1.5px,
    transparent 1.5px
  );
}

/* On dark (ink) backgrounds, use lighter dots */
.bg-dots.on-dark {
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.12) 1.5px,
    transparent 1.5px
  );
}


/* .bg-squiggle — wavy SVG-path background texture
   Horizontal repeating sine-wave squiggle at low opacity.
   Usage: add class to section element; set a background-color separately. */
.bg-squiggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='36' viewBox='0 0 120 36'%3E%3Cpath d='M0 18 C15 4, 30 4, 45 18 C60 32, 75 32, 90 18 C105 4, 120 4, 135 18' fill='none' stroke='%230D1526' stroke-width='2.5' stroke-linecap='round' opacity='0.07'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  background-size: 120px 36px;
}

/* On dark backgrounds, squiggle uses a lighter stroke */
.bg-squiggle.on-dark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='36' viewBox='0 0 120 36'%3E%3Cpath d='M0 18 C15 4, 30 4, 45 18 C60 32, 75 32, 90 18 C105 4, 120 4, 135 18' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' opacity='0.10'/%3E%3C/svg%3E");
}

/* On accent (yellow) backgrounds, use ink-navy squiggle, slightly more visible */
.bg-squiggle.on-accent {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='36' viewBox='0 0 120 36'%3E%3Cpath d='M0 18 C15 4, 30 4, 45 18 C60 32, 75 32, 90 18 C105 4, 120 4, 135 18' fill='none' stroke='%230D1526' stroke-width='2.5' stroke-linecap='round' opacity='0.12'/%3E%3C/svg%3E");
}


/* ────────────────────────────────────────────────────────────
   Accessibility: Reduced Motion
   Hard rule — overrides all animations/transitions sitewide.
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}