/* =========================================================================
   KOREOLOGY — Design Tokens
   Pulled directly from the Koreology brand guidelines (Macanuda Studio).
   Fun · eclectic · whimsical · bold color-blocking.
   ========================================================================= */

:root {
	/* ---- Brand palette (exact hex from guide) ---- */
	--ko-pink:        #FF9BB7;  /* PRIMARY  */
	--ko-plum:        #A90E43;  /* PRIMARY  */
	--ko-turquoise:   #0095A6;  /* SECONDARY */
	--ko-lime:        #DABD43;  /* SECONDARY */
	--ko-orange:      #FF5A00;  /* SECONDARY */
	--ko-olive:       #8D7609;  /* ACCENT    */

	/* ---- Derived / support ---- */
	--ko-pink-soft:   #FFD0DD;
	--ko-pink-tint:   #FFE8EE;
	--ko-plum-dark:   #870A35;
	--ko-turq-dark:   #007A88;
	--ko-orange-dark: #E04F00;
	--ko-cream:       #FFF8F2;  /* warm off-white page bg */
	--ko-ink:         #1C1C1C;  /* near-black outlines/text */
	--ko-ink-soft:    #4A4A4A;
	--ko-white:       #FFFFFF;

	/* ---- Semantic ---- */
	--ko-bg:        var(--ko-cream);
	--ko-surface:   var(--ko-white);
	--ko-text:      var(--ko-ink);
	--ko-text-muted:var(--ko-ink-soft);
	--ko-primary:   var(--ko-plum);
	--ko-accent:    var(--ko-orange);
	--ko-sale:      var(--ko-orange);

	/* ---- Typography ---- */
	/* Swear Display (guide) → Fraunces is the closest free, characterful,
	   high-contrast wavy serif. Poppins matches the guide exactly. */
	--ko-font-display: "Fraunces", "Times New Roman", Georgia, serif;
	--ko-font-body:    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--ko-fs-hero:  clamp(2.8rem, 7vw, 6rem);
	--ko-fs-h1:    clamp(2.2rem, 5vw, 3.6rem);
	--ko-fs-h2:    clamp(1.7rem, 3.6vw, 2.7rem);
	--ko-fs-h3:    clamp(1.3rem, 2.2vw, 1.7rem);
	--ko-fs-body:  1.0625rem;
	--ko-fs-small: 0.875rem;
	--ko-fs-micro: 0.75rem;

	--ko-lh-tight: 0.98;
	--ko-lh-snug:  1.25;
	--ko-lh-body:  1.7;

	/* ---- Spacing ---- */
	--ko-space-1: 0.5rem;
	--ko-space-2: 1rem;
	--ko-space-3: 1.5rem;
	--ko-space-4: 2.5rem;
	--ko-space-5: 4rem;
	--ko-space-6: 6.5rem;

	/* ---- Signature pill / outline system ---- */
	--ko-outline:   3px solid var(--ko-ink);   /* black outlines from guide */
	--ko-radius-sm: 14px;
	--ko-radius:    24px;
	--ko-radius-lg: 40px;
	--ko-radius-pill: 999px;

	--ko-shadow-pop: 6px 6px 0 var(--ko-ink);   /* hard offset "sticker" shadow */
	--ko-shadow-soft: 0 14px 40px -16px rgba(28,28,28,0.32);

	/* ---- Layout ---- */
	--ko-maxw: 1280px;
	--ko-gutter: clamp(1.1rem, 4vw, 3.25rem);

	/* ---- Motion ---- */
	--ko-ease: cubic-bezier(0.34, 1.3, 0.4, 1);  /* springy */
	--ko-dur:  0.5s;
}