@font-face{font-family:"Clash Grotesk";src:url("assets/ClashGrotesk-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Clash Grotesk";src:url("assets/ClashGrotesk-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
:root{--font-body:"Clash Grotesk",system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
/* Spinni — Color tokens. Base palette drawn from vintage soda-parlor colors + a neutral ivory. */
:root {
  /* ---- Brand core ---- */
  --spinni-ivory: #fff7e7;   /* neutral base — gives the system room to breathe */
  --spinni-mellow: #feeca2;  /* soft butter yellow */
  --spinni-cherry: #f13e40;  /* vivid soda red */
  --spinni-cobalt: #0072d2;  /* electric blue */

  /* Ivory tints/shades for surfaces & lines */
  --spinni-ivory-100: #fffbf4;
  --spinni-ivory-200: #fff7e7;
  --spinni-ivory-300: #f6ecd6;
  --spinni-ivory-400: #eaddc4;
  --spinni-cream-line: #ecdcc0;

  /* Ink — warm near-black used for type on ivory */
  --spinni-ink: #1c1712;
  --spinni-ink-70: rgba(28, 23, 18, 0.7);
  --spinni-ink-45: rgba(28, 23, 18, 0.45);

  /* Cobalt deep shade (for hover/press on cobalt) */
  --spinni-cobalt-700: #004783;
  --spinni-cherry-700: #c62b2e;

  /* ---- Flavor colors (exact per brand color sheets) ---- */
  /* Homestyle Vanilla Bean */
  --flavor-vanilla-ivory: #fffbf4;
  --flavor-vanilla-crema: #eaded0;
  /* Strawberry n' Cream */
  --flavor-strawberry-rose: #ffb7b7;   /* Rose — light pink */
  --flavor-strawberry-candypink: #fd5f5f; /* Candy Pink — deep coral */
  /* Dutch Chocolate */
  --flavor-chocolate-milkyway: #dfc8a9;
  --flavor-chocolate-coco: #7c4e3a;
  /* Birthday Cake */
  --flavor-birthday-confetti: #ffed7b;
  --flavor-birthday-emerald: #62d19c;
  --flavor-birthday-sky: #8eeaff;

  /* ---- Semantic aliases ---- */
  --bg-page: var(--spinni-ivory);
  --bg-page-alt: var(--spinni-ivory-100);
  --surface-card: var(--spinni-ivory-100);
  --surface-raised: #ffffff;
  --border-hairline: var(--spinni-cream-line);
  --border-ink: var(--spinni-ink);

  --text-body: var(--spinni-ink);
  --text-muted: var(--spinni-ink-70);
  --text-faint: var(--spinni-ink-45);
  --text-on-cobalt: var(--spinni-ivory);
  --text-on-cherry: var(--spinni-ivory);

  --accent-primary: var(--spinni-cherry);
  --accent-secondary: var(--spinni-cobalt);
  --accent-highlight: var(--spinni-mellow);

  --focus-ring: var(--spinni-cobalt);
}

/* Spinni — Spacing, radii, borders, shadows, motion.
   The system leans on a warm ivory base, chunky ink outlines, and rounded, sticker-like shapes. */
:root {
  /* Spacing scale (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* Radii — soft, scoop-like. Pills & big rounds are on-brand. */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Borders — the brand uses confident ink outlines */
  --border-w: 2px;
  --border-w-thick: 3px;
  --border-ink-line: var(--border-w) solid var(--spinni-ink);

  /* Shadows — flat, sticker-style offset rather than soft blurs */
  --shadow-sticker: 3px 3px 0 var(--spinni-ink);
  --shadow-sticker-lg: 5px 5px 0 var(--spinni-ink);
  --shadow-soft: 0 6px 20px rgba(28, 23, 18, 0.10);
  --shadow-card: 0 2px 0 var(--spinni-cream-line);

  /* Motion — snappy, playful. A little bounce, never sluggish. */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */

  /* Layout */
  --container-max: 1200px; /* @kind spacing */
  --gutter: var(--sp-5); /* @kind spacing */
}