/* ============================================
   GlutenFreeVibes — CSS Custom Properties
   Design tokens derived from the brand kit.
   ============================================ */

:root {
	/* ── Color Palette ── */
	--midnight:    #111827;
	--lime-pop:    #B7FF3C;
	--punch:       #FF5C8A;
	--sky-wash:    #DDF4FF;
	--cream-soda:  #FFF8EE;
	--tangerine:   #FF8A34;
	--graphite:    #1D1D1D;

	/* Derived / utility colors */
	--white:       #FFFFFF;
	--black:       #000000;
	--lime-pop-dark: #9FE030;   /* Lime Pop darkened ~8% for hover states */
	--punch-light:   #FF85A8;
	--midnight-90:   rgba(17, 24, 39, 0.90);
	--midnight-60:   rgba(17, 24, 39, 0.60);
	--midnight-30:   rgba(17, 24, 39, 0.30);
	--midnight-10:   rgba(17, 24, 39, 0.10);

	/* ── Typography — Font Families ── */
	--font-display:  'Space Grotesk', sans-serif;
	--font-heading:  'Satoshi', sans-serif;
	--font-body:     'Inter', sans-serif;
	--font-mono:     'IBM Plex Mono', monospace;

	/* ── Typography — Type Scale ── */
	--text-xs:   0.75rem;    /* 12px — labels, tags */
	--text-sm:   0.875rem;   /* 14px — metadata, captions */
	--text-base: 1rem;       /* 16px — body */
	--text-lg:   1.125rem;   /* 18px — lead text */
	--text-xl:   1.25rem;    /* 20px */
	--text-2xl:  1.5rem;     /* 24px */
	--text-3xl:  1.875rem;   /* 30px */
	--text-4xl:  2.25rem;    /* 36px */
	--text-5xl:  3rem;       /* 48px */
	--text-6xl:  3.75rem;    /* 60px — hero display */

	/* ── Spacing Scale ── */
	--space-1:   0.25rem;    /*  4px */
	--space-2:   0.5rem;     /*  8px */
	--space-3:   0.75rem;    /* 12px */
	--space-4:   1rem;       /* 16px */
	--space-5:   1.5rem;     /* 24px */
	--space-6:   2rem;       /* 32px */
	--space-8:   3rem;       /* 48px */
	--space-10:  4rem;       /* 64px */
	--space-12:  5rem;       /* 80px */
	--space-16:  8rem;       /* 128px */

	/* ── Border Radius ── */
	--radius-sm:   4px;
	--radius-md:   8px;
	--radius-lg:   12px;
	--radius-xl:   20px;
	--radius-2xl:  28px;
	--radius-full: 9999px;

	/* ── Shadows ── */
	--shadow-sm:   0 1px 3px rgba(17, 24, 39, 0.08);
	--shadow-md:   0 4px 12px rgba(17, 24, 39, 0.10);
	--shadow-lg:   0 8px 32px rgba(17, 24, 39, 0.12);
	--shadow-card: 0 2px 8px rgba(17, 24, 39, 0.07), 0 1px 2px rgba(17, 24, 39, 0.04);

	/* ── Transitions ── */
	--ease-default: 200ms ease;
	--ease-card:    300ms ease;
	--ease-nav:     280ms ease-out;

	/* ── Layout ── */
	--content-width:   680px;
	--sidebar-width:   320px;
	--container-max:   1280px;
	--container-wide:  1536px;
}