/* =========================================================
   Sprinkled Scoops Co. — Colors & Type
   Locally-owned ice cream trailer • Phoenix, AZ
   ========================================================= */

/* ---------- Webfonts (Google Fonts substitutes for the trailer wrap) ---------- */
/*  - Pacifico       → script wordmark (substitute for the hand-lettered "Sprinkled")
    - MADE Waffle Soft → brand display (block letters, supplied by client)
    - Nunito         → friendly body sans
   See README "Visual Foundations → Type" for substitution notes. */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Nunito:wght@400;600;700;800&display=swap');

@font-face {
  font-family: 'MADE Waffle Soft';
  src: url('fonts/MADE_Waffle_Soft_PERSONAL_USE.otf') format('opentype');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============ CORE BRAND PALETTE ============ */
  /* Pulled from the trailer wrap + logo badge */
  --pink-500:   #ec4d8f;   /* primary "Sprinkled" pink — the wordmark + drip */
  --pink-400:   #f476a8;
  --pink-300:   #f9a8c8;
  --pink-200:   #fcd3e2;
  --pink-100:   #fdebf2;
  --pink-50:    #fff5f9;

  --teal-500:   #5dc7c6;   /* tagline ribbon teal */
  --teal-400:   #84d6d5;
  --teal-200:   #bfe7e6;
  --teal-100:   #e2f4f3;

  --ink-900:    #0d0d10;   /* trailer black */
  --ink-800:    #1a1a1f;
  --ink-700:    #2a2a31;
  --ink-500:    #5b5b66;
  --ink-300:    #9a9aa6;
  --ink-200:    #c8c8d0;
  --ink-100:    #e7e7eb;
  --ink-50:     #f4f4f7;

  --cream:      #fffaf2;   /* cream backdrop — alternative to pure white */
  --white:      #ffffff;

  /* ============ SPRINKLE ACCENT COLORS ============ */
  /* The rainbow scatter on the trailer — use sparingly as accents */
  --sprinkle-pink:   #ff5fa3;
  --sprinkle-orange: #ff8a3d;
  --sprinkle-yellow: #ffd23d;
  --sprinkle-mint:   #7fe0b8;
  --sprinkle-blue:   #5fb8ff;
  --sprinkle-purple: #b07cff;
  --sprinkle-cream:  #fff2d6;

  /* Scoop / cone (logo) */
  --scoop-strawberry: #f5a3c2;
  --scoop-blueberry:  #9fd4ec;
  --scoop-vanilla:    #fff3d6;
  --cone:             #e8a356;

  /* ============ SEMANTIC TOKENS ============ */
  --fg-1:       var(--ink-900);   /* primary text on light bg */
  --fg-2:       var(--ink-700);   /* secondary text */
  --fg-3:       var(--ink-500);   /* tertiary / captions */
  --fg-inv:     var(--white);     /* text on dark / pink bg */
  --fg-brand:   var(--pink-500);  /* brand-colored text */
  --fg-accent:  var(--teal-500);

  --bg-1:       var(--white);     /* base page */
  --bg-2:       var(--cream);     /* warm alt section */
  --bg-3:       var(--pink-50);   /* softest pink wash */
  --bg-dark:    var(--ink-900);   /* trailer-black hero */
  --bg-pink:    var(--pink-500);  /* hot-pink panel */
  --bg-teal:    var(--teal-500);

  --border-1:   var(--ink-100);
  --border-2:   var(--ink-200);
  --border-pink: var(--pink-200);

  --link:       var(--pink-500);
  --link-hover: var(--pink-400);

  --success:    #2fb673;
  --warning:    #f0a93b;
  --danger:     #e54848;

  /* ============ ELEVATION / RADII / SPACING ============ */
  /* Pillowy, friendly — never sharp */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  36px;
  --radius-pill: 999px;

  --shadow-sm:  0 1px 2px rgba(13,13,16,.06), 0 1px 1px rgba(13,13,16,.04);
  --shadow-md:  0 6px 18px rgba(13,13,16,.08), 0 2px 6px rgba(13,13,16,.05);
  --shadow-lg:  0 20px 48px rgba(13,13,16,.12), 0 4px 12px rgba(13,13,16,.06);
  --shadow-pink: 0 14px 32px rgba(236,77,143,.28);
  --shadow-pop: 0 8px 0 var(--ink-900);          /* offset "sticker" shadow */
  --shadow-pop-pink: 0 8px 0 var(--pink-500);

  --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;

  --container: 1200px;

  /* ============ TYPE — FAMILIES ============ */
  --font-script:   'Pacifico', 'Lobster', cursive;
  --font-display:  'MADE Waffle Soft', 'Fredoka', 'Baloo 2', system-ui, sans-serif;
  --font-body:     'Nunito', 'Avenir Next', system-ui, -apple-system, sans-serif;
  --font-mono:     ui-monospace, 'SF Mono', Menlo, monospace;

  /* ============ TYPE — SIZES / WEIGHTS ============ */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;
  --fs-4xl:  52px;
  --fs-5xl:  72px;
  --fs-6xl:  104px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.65;

  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.16em;   /* used for tiny eyebrow labels */
}

/* ============ SEMANTIC TYPE ROLES ============ */
.type-script {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--pink-500);
}

.type-h1, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.type-h2, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.type-h3, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.type-h4, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.type-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--pink-500);
}

.type-body, p, body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.type-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-xl);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.type-caption {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--fg-3);
}

.type-button {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: 0.02em;
}

.type-tagline {
  /* "SCOOP HAPPINESS • SPRINKLE JOY" — small caps spaced banner */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--white);
}