/* Cusps — Design Trends Kit · Type pairings (open-source Google Fonts, commercial-ok) */
/* Import the Google Fonts per the comment, then use the matching class. */

/* Chrome · Airbrush — Display Syne + Body Space Grotesk */
/* @import url("https://fonts.googleapis.com/css2?family=Syne:wght@600;800&family=Space+Grotesk:wght@400;500&display=swap");  or  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@600;800&family=Space+Grotesk:wght@400;500&display=swap"> */
.chrome-heading{ font-family: "Syne", sans-serif; }
.chrome-body{ font-family: "Space Grotesk", sans-serif; }

/* Wordmark Minimalism — Display Archivo + Body Inter */
/* @import url("https://fonts.googleapis.com/css2?family=Archivo:wght@600;800&family=Inter:wght@400;500&display=swap");  or  <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@600;800&family=Inter:wght@400;500&display=swap"> */
.wordmark-heading{ font-family: "Archivo", sans-serif; }
.wordmark-body{ font-family: "Inter", sans-serif; }

/* Inflated 3D Type — Display Fredoka + Body Nunito */
/* @import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;700&family=Nunito:wght@400;600&display=swap");  or  <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@500;700&family=Nunito:wght@400;600&display=swap"> */
.inflate-heading{ font-family: "Fredoka", sans-serif; }
.inflate-body{ font-family: "Nunito", sans-serif; }

/* Neo-Brutalism — Display Archivo Black + Body Space Mono */
/* @import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap");  or  <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap"> */
.brutal-heading{ font-family: "Archivo Black", sans-serif; }
.brutal-body{ font-family: "Space Mono", monospace; }

/* Spatial Glass — Display Sora + Body Inter */
/* @import url("https://fonts.googleapis.com/css2?family=Sora:wght@500;700&family=Inter:wght@400;500&display=swap");  or  <link href="https://fonts.googleapis.com/css2?family=Sora:wght@500;700&family=Inter:wght@400;500&display=swap"> */
.glass-heading{ font-family: "Sora", sans-serif; }
.glass-body{ font-family: "Inter", sans-serif; }

/* Big Type Minimalism — Display Anton + Body Inter */
/* @import url("https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500&display=swap");  or  <link href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500&display=swap"> */
.bigtype-heading{ font-family: "Anton", sans-serif; }
.bigtype-body{ font-family: "Inter", sans-serif; }

/* Mono Terminal — Display Space Mono + Body IBM Plex Sans */
/* @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=IBM+Plex+Sans:wght@400;500&display=swap");  or  <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=IBM+Plex+Sans:wght@400;500&display=swap"> */
.mono-heading{ font-family: "Space Mono", monospace; }
.mono-body{ font-family: "IBM Plex Sans", sans-serif; }

/* Neo-Skeuomorphism — Display Bricolage Grotesque + Body Hanken Grotesk */
/* @import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;800&family=Hanken+Grotesk:wght@400;500&display=swap");  or  <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;800&family=Hanken+Grotesk:wght@400;500&display=swap"> */
.skeu-heading{ font-family: "Bricolage Grotesque", sans-serif; }
.skeu-body{ font-family: "Hanken Grotesk", sans-serif; }

/* Bento Grid — Display Plus Jakarta Sans + Body Inter */
/* @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;800&family=Inter:wght@400;500&display=swap");  or  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;800&family=Inter:wght@400;500&display=swap"> */
.bento-heading{ font-family: "Plus Jakarta Sans", sans-serif; }
.bento-body{ font-family: "Inter", sans-serif; }

/* Contrast Display Serif — Display Fraunces + Body Inter */
/* @import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@400;600;900&family=Inter:wght@400;500&display=swap");  or  <link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@400;600;900&family=Inter:wght@400;500&display=swap"> */
.serif-heading{ font-family: "Fraunces", serif; }
.serif-body{ font-family: "Inter", sans-serif; }

/* Variable Font Motion — Display Syne + Body Inter */
/* @import url("https://fonts.googleapis.com/css2?family=Syne:wght@600;800&family=Inter:wght@400;500&display=swap");  or  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@600;800&family=Inter:wght@400;500&display=swap"> */
.varfont-heading{ font-family: "Syne", sans-serif; }
.varfont-body{ font-family: "Inter", sans-serif; }

/* Hand-Lettering — Display Caveat + Body Nunito Sans */
/* @import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Nunito+Sans:wght@400;600&display=swap");  or  <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Nunito+Sans:wght@400;600&display=swap"> */
.handletter-heading{ font-family: "Caveat", cursive; }
.handletter-body{ font-family: "Nunito Sans", sans-serif; }

/* Acid / Hi-Vis — Display Space Grotesk + Body Space Mono */
/* @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Space+Mono:wght@400&display=swap");  or  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Space+Mono:wght@400&display=swap"> */
.acid-heading{ font-family: "Space Grotesk", sans-serif; }
.acid-body{ font-family: "Space Mono", monospace; }

/* Muted Earth — Display Newsreader + Body Nunito Sans */
/* @import url("https://fonts.googleapis.com/css2?family=Newsreader:wght@400;600&family=Nunito+Sans:wght@400;600&display=swap");  or  <link href="https://fonts.googleapis.com/css2?family=Newsreader:wght@400;600&family=Nunito+Sans:wght@400;600&display=swap"> */
.earth-heading{ font-family: "Newsreader", serif; }
.earth-body{ font-family: "Nunito Sans", sans-serif; }

/* Pastel Gradient — Display Quicksand + Body Nunito */
/* @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&family=Nunito:wght@400;600&display=swap");  or  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&family=Nunito:wght@400;600&display=swap"> */
.pastel-heading{ font-family: "Quicksand", sans-serif; }
.pastel-body{ font-family: "Nunito", sans-serif; }

/* Risograph — Display Bricolage Grotesque + Body IBM Plex Mono */
/* @import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;800&family=IBM+Plex+Mono:wght@400;500&display=swap");  or  <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;800&family=IBM+Plex+Mono:wght@400;500&display=swap"> */
.riso-heading{ font-family: "Bricolage Grotesque", sans-serif; }
.riso-body{ font-family: "IBM Plex Mono", monospace; }

/* Handmade Collage — Display Anton + Body Courier Prime */
/* @import url("https://fonts.googleapis.com/css2?family=Anton&family=Courier+Prime:wght@400;700&display=swap");  or  <link href="https://fonts.googleapis.com/css2?family=Anton&family=Courier+Prime:wght@400;700&display=swap"> */
.collage-heading{ font-family: "Anton", sans-serif; }
.collage-body{ font-family: "Courier Prime", monospace; }

/* Claymorphism — Display Fredoka + Body Quicksand */
/* @import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;700&family=Quicksand:wght@400;600&display=swap");  or  <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@500;700&family=Quicksand:wght@400;600&display=swap"> */
.clay-heading{ font-family: "Fredoka", sans-serif; }
.clay-body{ font-family: "Quicksand", sans-serif; }

/* Tailwind CSS — Display Inter + Body Inter */
/* @import url("https://fonts.googleapis.com/css2?family=Inter:wght@700;800&family=Inter:wght@400;500&display=swap");  or  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@700;800&family=Inter:wght@400;500&display=swap"> */
.tailwind-heading{ font-family: "Inter", sans-serif; }
.tailwind-body{ font-family: "Inter", sans-serif; }

/* Astro — Display Space Grotesk + Body Inter */
/* @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=Inter:wght@400;500&display=swap");  or  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=Inter:wght@400;500&display=swap"> */
.astro-heading{ font-family: "Space Grotesk", sans-serif; }
.astro-body{ font-family: "Inter", sans-serif; }

/* AI Image & Design — Display Sora + Body Inter */
/* @import url("https://fonts.googleapis.com/css2?family=Sora:wght@600;800&family=Inter:wght@400;500&display=swap");  or  <link href="https://fonts.googleapis.com/css2?family=Sora:wght@600;800&family=Inter:wght@400;500&display=swap"> */
.aigen-heading{ font-family: "Sora", sans-serif; }
.aigen-body{ font-family: "Inter", sans-serif; }

