/**
 * KabuliWala — 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 KabuliWala
 */

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

:root {
	/* --- Brand palette — KabuliWala / kabuliwala.co.uk --- */
	--ff-cream:           oklch(97% 0 0);       /* #f5f5f5 page bg */
	--ff-cream-soft:      oklch(95% 0 0);
	--ff-mist:            oklch(20% 0 0);        /* dark section bg */
	--ff-sage:            oklch(78% 0.15 75);    /* gold accent #faab34 */
	--ff-olive:           oklch(28% 0 0);        /* body text #3b3b3b */
	--ff-olive-soft:      oklch(22% 0 0);
	--ff-muted-fg:        oklch(45% 0 0);
	--ff-line:            oklch(88% 0 0);

	/* --- Semantic aliases --- */
	--ff-bg:                 var(--ff-cream);
	--ff-bg-alt:             oklch(20% 0 0);
	--ff-card:               oklch(100% 0 0);
	--ff-foreground:         var(--ff-olive);
	--ff-card-foreground:    var(--ff-olive);
	--ff-primary:            oklch(20% 0 0);
	--ff-primary-foreground: oklch(100% 0 0);
	--ff-secondary:          oklch(100% 0 0);
	--ff-secondary-foreground: oklch(78% 0.15 75);
	--ff-accent:             oklch(78% 0.15 75);
	--ff-accent-foreground:  oklch(20% 0 0);
	--ff-muted:              oklch(92% 0 0);
	--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:      #f5f5f5;
		--ff-cream-soft: #eeeeee;
		--ff-mist:       #1a1a1a;
		--ff-sage:       #faab34;
		--ff-olive:      #3b3b3b;
		--ff-olive-soft: #1a1a1a;
		--ff-muted-fg:   #6b6b6b;
		--ff-line:       #dddddd;
		--ff-card:       #ffffff;
	}
}

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

html {
	scroll-behavior: smooth;
}

body.kabuliwala {
	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.kabuliwala h1,
body.kabuliwala h2,
body.kabuliwala h3,
body.kabuliwala 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.kabuliwala`
	   so component-scoped overrides like `.ff-hero__title { color: cream }`
	   are not defeated by element-tag specificity. */
}

body.kabuliwala h5,
body.kabuliwala 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.kabuliwala h1 {
	font-size: clamp(2.5rem, 4vw + 1rem, var(--ff-text-7xl));
	line-height: 1.05;
}
body.kabuliwala h2 {
	font-size: clamp(2rem, 2.4vw + 0.6rem, 3rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
}
body.kabuliwala h3 {
	font-size: clamp(1.125rem, 0.6vw + 1rem, 1.375rem);
	line-height: 1.3;
	letter-spacing: -0.01em;
}
body.kabuliwala h4 {
	font-size: var(--ff-text-base);
	line-height: 1.3;
	letter-spacing: var(--ff-tracking-normal);
}
body.kabuliwala h5 { font-size: var(--ff-text-xl); }
body.kabuliwala h6 { font-size: var(--ff-text-lg); }

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

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

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

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

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

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

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

/* Let cover/fill images (hero, categories, product cards) use their
   component height: 100% — body.kabuliwala img { height: auto } wins
   otherwise and crops heroes on mobile. */
@media (max-width: 639.99px) {
	body.kabuliwala 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.kabuliwala svg {
	max-width: 100%;
}

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

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

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

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

/* Common eyebrow label seen above many headlines on the live site. */
.kabuliwala-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)
 * ========================================================================= */

.kabuliwala-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);
}

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

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

.kabuliwala-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;
}