/**
 * FlanFudge — main stylesheet.
 *
 * Tokens here match the live Lovable site one-to-one (oklch palette,
 * Nunito everywhere, Tailwind v4 spacing/text scale, 0.875rem radius)
 * so every later component renders the same colours and rhythm without
 * us hand-translating values.
 *
 * Component sheets (header.css, drawer.css, …) are enqueued separately
 * and inherit these tokens. No @import here so the network waterfall
 * stays flat.
 *
 * @package FlanFudge
 */

/* =========================================================================
 * 1. Design tokens — pulled from Lovable's Tailwind theme layer.
 * ========================================================================= */

:root {
	/* --- Brand palette (oklch, exactly as in Lovable) --- */
	--ff-cream:           oklch(97% 0.018 95);   /* page bg + warm off-white */
	--ff-cream-soft:      oklch(96% 0.02 95);    /* subtle layer */
	--ff-mist:            oklch(93% 0.03 120);   /* pale sage / mint */
	--ff-sage:            oklch(66% 0.09 125);   /* mid sage accent */
	--ff-olive:           oklch(34% 0.06 130);   /* deep olive ink */
	--ff-olive-soft:      oklch(38% 0.06 130);   /* hover state */
	--ff-muted-fg:        oklch(45% 0.04 130);   /* muted body text */
	--ff-line:            oklch(88% 0.02 120);   /* hairline borders */

	/* --- Semantic aliases (mirror Tailwind's --primary etc.) --- */
	--ff-bg:                 var(--ff-cream);
	--ff-bg-alt:             var(--ff-mist);
	--ff-card:               oklch(100% 0 0);
	--ff-foreground:         var(--ff-olive);
	--ff-card-foreground:    var(--ff-olive);
	--ff-primary:            var(--ff-olive);
	--ff-primary-foreground: var(--ff-cream);
	--ff-secondary:          var(--ff-mist);
	--ff-secondary-foreground: var(--ff-olive);
	--ff-accent:             var(--ff-sage);
	--ff-accent-foreground:  var(--ff-cream);
	--ff-muted:              var(--ff-mist);
	--ff-border:             var(--ff-line);
	--ff-ring:               var(--ff-sage);

	/* --- Typography --- */
	--ff-font-sans:    "Nunito", ui-sans-serif, system-ui, -apple-system,
	                   "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ff-font-display: var(--ff-font-sans); /* Lovable uses Nunito for both */

	/* Tailwind v4 text scale (1:1) */
	--ff-text-xs:   0.75rem;
	--ff-text-sm:   0.875rem;
	--ff-text-base: 1rem;
	--ff-text-lg:   1.125rem;
	--ff-text-xl:   1.25rem;
	--ff-text-2xl:  1.5rem;
	--ff-text-3xl:  1.875rem;
	--ff-text-4xl:  2.25rem;
	--ff-text-5xl:  3rem;
	--ff-text-6xl:  3.75rem;
	--ff-text-7xl:  4.5rem;

	--ff-leading-tight:    1.25;
	--ff-leading-snug:     1.375;
	--ff-leading-normal:   1.5;
	--ff-leading-relaxed:  1.625;

	--ff-tracking-tight:   -0.025em;
	--ff-tracking-normal:  0;
	--ff-tracking-wider:   0.05em;
	--ff-tracking-widest:  0.1em;

	--ff-weight-normal:    400;
	--ff-weight-medium:    500;
	--ff-weight-semibold:  600;
	--ff-weight-bold:      700;
	--ff-weight-extrabold: 800;

	/* --- Spacing (Tailwind 4px base) --- */
	--ff-spacing-base: 0.25rem;
	--ff-space-1:  calc(var(--ff-spacing-base) * 1);   /* 4 */
	--ff-space-2:  calc(var(--ff-spacing-base) * 2);   /* 8 */
	--ff-space-3:  calc(var(--ff-spacing-base) * 3);   /* 12 */
	--ff-space-4:  calc(var(--ff-spacing-base) * 4);   /* 16 */
	--ff-space-5:  calc(var(--ff-spacing-base) * 5);   /* 20 */
	--ff-space-6:  calc(var(--ff-spacing-base) * 6);   /* 24 */
	--ff-space-8:  calc(var(--ff-spacing-base) * 8);   /* 32 */
	--ff-space-10: calc(var(--ff-spacing-base) * 10);  /* 40 */
	--ff-space-12: calc(var(--ff-spacing-base) * 12);  /* 48 */
	--ff-space-16: calc(var(--ff-spacing-base) * 16);  /* 64 */
	--ff-space-20: calc(var(--ff-spacing-base) * 20);  /* 80 */
	--ff-space-24: calc(var(--ff-spacing-base) * 24);  /* 96 */

	/* --- Layout --- */
	--ff-container:        1280px;
	--ff-container-narrow: 880px;
	--ff-gutter:           clamp(20px, 4vw, 48px);

	/* --- Radius + elevation --- */
	--ff-radius:        0.875rem;            /* matches Lovable --radius */
	--ff-radius-sm:     calc(var(--ff-radius) - 4px);
	--ff-radius-md:     var(--ff-radius);
	--ff-radius-lg:     calc(var(--ff-radius) + 4px);
	--ff-radius-xl:     calc(var(--ff-radius) + 8px);
	--ff-radius-pill:   999px;
	--ff-shadow-sm:     0 1px 2px rgb(0 0 0 / 0.05);
	--ff-shadow:        0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
	--ff-shadow-md:     0 8px 24px rgb(31 42 36 / 0.08);
	--ff-shadow-lg:     0 24px 60px rgb(31 42 36 / 0.14);

	/* --- Motion --- */
	--ff-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
	--ff-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
	--ff-dur-fast:    160ms;
	--ff-dur-base:    260ms;
	--ff-dur-slow:    480ms;
}

/* sRGB hex fallback for browsers without oklch() (very few left). */
@supports not (color: oklch(0% 0 0)) {
	:root {
		--ff-cream:      #f7f1e1;
		--ff-cream-soft: #f5eed9;
		--ff-mist:       #e7ebd7;
		--ff-sage:       #a3b97a;
		--ff-olive:      #2e3b25;
		--ff-olive-soft: #364432;
		--ff-muted-fg:   #5a6a4d;
		--ff-line:       #ddd9c8;
		--ff-card:       #ffffff;
	}
}

/* =========================================================================
 * 2. Base / reset (very light — GeneratePress already normalises a lot)
 * ========================================================================= */

html {
	scroll-behavior: smooth;
}

body.flanfudge {
	background: var(--ff-bg);
	color: var(--ff-foreground);
	font-family: var(--ff-font-sans);
	font-size: var(--ff-text-base);
	font-weight: var(--ff-weight-normal);
	line-height: var(--ff-leading-relaxed);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body.flanfudge h1,
body.flanfudge h2,
body.flanfudge h3,
body.flanfudge h4 {
	font-family: var(--ff-font-display);
	/* Per design spec: every editorial heading h1-h4 normalises to 500,
	   keeping the page calm and premium. Heavier weights on individual
	   tokens (badges, product titles inside cards, etc.) live in their
	   own component classes so they can override per surface. */
	font-weight: var(--ff-weight-medium);
	letter-spacing: var(--ff-tracking-tight);
	line-height: var(--ff-leading-tight);
	margin: 0 0 var(--ff-space-4);
	/* No `color` here on purpose — colour inherits from `body.flanfudge`
	   so component-scoped overrides like `.ff-hero__title { color: cream }`
	   are not defeated by element-tag specificity. */
}

body.flanfudge h5,
body.flanfudge h6 {
	font-family: var(--ff-font-display);
	font-weight: var(--ff-weight-semibold);
	letter-spacing: var(--ff-tracking-tight);
	line-height: var(--ff-leading-tight);
	margin: 0 0 var(--ff-space-4);
}

/* Lovable's hierarchy:
   - h1 hero  ~72px desktop, line 1.05, tight tracking
   - h2 sect  ~48px desktop, line 1.1
   - h3 card  ~20-22px,    line 1.3
   - h4 small ~14px uppercase tracked (footer + minor headings) */
body.flanfudge h1 {
	font-size: clamp(2.5rem, 4vw + 1rem, var(--ff-text-7xl));
	line-height: 1.05;
}
body.flanfudge h2 {
	font-size: clamp(2rem, 2.4vw + 0.6rem, 3rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
}
body.flanfudge h3 {
	font-size: clamp(1.125rem, 0.6vw + 1rem, 1.375rem);
	line-height: 1.3;
	letter-spacing: -0.01em;
}
body.flanfudge h4 {
	font-size: var(--ff-text-base);
	line-height: 1.3;
	letter-spacing: var(--ff-tracking-normal);
}
body.flanfudge h5 { font-size: var(--ff-text-xl); }
body.flanfudge h6 { font-size: var(--ff-text-lg); }

/* Editorial / WC copy — readable paragraph rhythm */
body.flanfudge p {
	margin: 0 0 var(--ff-space-4);
}

/* Homepage + shop sections control spacing via component classes */
body.flanfudge .ff-section p,
body.flanfudge .ff-mini-cart p,
body.flanfudge .site-footer p {
	margin: 0;
}

body.flanfudge .ff-prose p,
body.flanfudge .flanfudge-prose p {
	margin: 0 0 var(--ff-space-4);
}

body.flanfudge .ff-prose p:last-child,
body.flanfudge .flanfudge-prose p:last-child {
	margin-bottom: 0;
}

body.flanfudge a {
	color: var(--ff-foreground);
	text-decoration: none;
	transition: color var(--ff-dur-fast) var(--ff-ease);
}

body.flanfudge a:hover,
body.flanfudge a:focus-visible {
	color: var(--ff-accent);
}

body.flanfudge img {
	max-width: 100%;
	height: auto;
}

/* Let cover/fill images (hero, categories, product cards) use their
   component height: 100% — body.flanfudge img { height: auto } wins
   otherwise and crops heroes on mobile. */
@media (max-width: 639.99px) {
	body.flanfudge img {
		height: unset;
	}
}

/* SVGs are sized by the component that owns them — leaving this open
   lets icon buttons keep their fixed 22×22 box without !important. */
body.flanfudge svg {
	max-width: 100%;
}

/* =========================================================================
 * 3. Layout primitives
 * ========================================================================= */

.flanfudge-container {
	width: 100%;
	max-width: var(--ff-container);
	margin-inline: auto;
	padding-inline: var(--ff-gutter);
}

.flanfudge-container--narrow {
	max-width: var(--ff-container-narrow);
}

.flanfudge-section {
	padding-block: clamp(48px, 7vw, 112px);
}

/* Common eyebrow label seen above many headlines on the live site. */
.flanfudge-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--ff-space-2);
	font-size: var(--ff-text-sm);
	font-weight: var(--ff-weight-semibold);
	letter-spacing: var(--ff-tracking-widest);
	text-transform: uppercase;
	color: var(--ff-accent);
}

/* =========================================================================
 * 4. Buttons (shared shell — variants live in component sheets)
 * ========================================================================= */

.flanfudge-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ff-space-2);
	padding: 0.75rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--ff-radius-pill);
	font-family: inherit;
	font-size: var(--ff-text-base);
	font-weight: var(--ff-weight-bold);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--ff-dur-fast) var(--ff-ease),
	            color var(--ff-dur-fast) var(--ff-ease),
	            transform var(--ff-dur-fast) var(--ff-ease),
	            box-shadow var(--ff-dur-fast) var(--ff-ease);
}

.flanfudge-btn--primary {
	background: var(--ff-primary);
	color: var(--ff-primary-foreground);
}
.flanfudge-btn--primary:hover {
	background: var(--ff-olive-soft);
	color: var(--ff-primary-foreground);
}

.flanfudge-btn--ghost {
	background: transparent;
	color: var(--ff-foreground);
	border-color: var(--ff-border);
}
.flanfudge-btn--ghost:hover {
	background: var(--ff-bg-alt);
}

.flanfudge-btn:focus-visible {
	outline: 2px solid var(--ff-ring);
	outline-offset: 3px;
}

/* =========================================================================
 * 5. Accessibility
 * ========================================================================= */

.skip-link.skip-link {
	left: 8px;
	top: 8px;
	padding: 12px 18px;
	background: var(--ff-foreground);
	color: var(--ff-bg);
	border-radius: var(--ff-radius-sm);
	z-index: 10000;
	font-weight: var(--ff-weight-semibold);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
		scroll-behavior: auto;
	}
}

/* =========================================================================
 * 6. Body scroll-lock helper (used when the mobile drawer is open)
 * ========================================================================= */

body.is-drawer-open,
body.is-mini-cart-open {
	overflow: hidden;
	touch-action: none;
}