/* ==========================================================================
   WE Coffee — Design Tokens
   System wizualny oparty na 8px grid i fluid typography.
   ========================================================================== */

:root {
	/* ---- Kolory ---- */
	--wecoffee-color-espresso: #3B2820;
	--wecoffee-color-latte: #C4A882;
	--wecoffee-color-cream: #FAF8F5;
	--wecoffee-color-parchment: #F0EBE3;
	--wecoffee-color-charcoal: #2C2C2C;
	--wecoffee-color-stone: #8C8C8C;
	--wecoffee-color-white: #FFFFFF;
	--wecoffee-color-error: #C7372F;
	--wecoffee-color-success: #2D7A3A;

	/* Aliasy semantyczne */
	--wecoffee-color-primary: var(--wecoffee-color-espresso);
	--wecoffee-color-secondary: var(--wecoffee-color-latte);
	--wecoffee-color-background: var(--wecoffee-color-cream);
	--wecoffee-color-surface: var(--wecoffee-color-white);
	--wecoffee-color-surface-alt: var(--wecoffee-color-parchment);
	--wecoffee-color-text: var(--wecoffee-color-charcoal);
	--wecoffee-color-text-muted: var(--wecoffee-color-stone);
	--wecoffee-color-border: #E5E0D8;

	/* ---- Typografia ---- */
	--wecoffee-font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--wecoffee-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Skala typograficzna — dramatic hierarchy */
	--wecoffee-text-hero: clamp(2.75rem, 7vw, 5.5rem);
	--wecoffee-text-display: clamp(3.5rem, 8.5vw, 9.5rem);
	--wecoffee-text-h1: clamp(2rem, 4vw, 3rem);
	--wecoffee-text-h2: clamp(1.5rem, 3vw, 2.25rem);
	--wecoffee-text-h3: clamp(1.25rem, 2vw, 1.5rem);
	--wecoffee-text-h4: 1.125rem;
	--wecoffee-text-h5: 1rem;
	--wecoffee-text-h6: 0.875rem;
	--wecoffee-text-body: 1rem;
	--wecoffee-text-small: 0.875rem;
	--wecoffee-text-caption: 0.75rem;

	/* ---- Spacing (8px grid) ---- */
	--wecoffee-space-2xs: 0.25rem;  /* 4px */
	--wecoffee-space-xs: 0.5rem;    /* 8px */
	--wecoffee-space-sm: 0.75rem;   /* 12px */
	--wecoffee-space-md: 1rem;      /* 16px */
	--wecoffee-space-lg: 1.5rem;    /* 24px */
	--wecoffee-space-xl: 2.5rem;    /* 40px */
	--wecoffee-space-2xl: 4rem;     /* 64px */
	--wecoffee-space-3xl: 6rem;     /* 96px */

	/* Fluid section spacing */
	--wecoffee-section-gap: clamp(var(--wecoffee-space-xl), 8vw, var(--wecoffee-space-3xl));

	/* ---- Layout ---- */
	--wecoffee-content-width: 75rem;   /* 1200px */
	--wecoffee-narrow-width: 48rem;    /* 768px */
	--wecoffee-gutter: var(--wecoffee-space-lg); /* 24px */

	/* ---- Border Radius ---- */
	--wecoffee-radius-sm: 4px;
	--wecoffee-radius-md: 6px;
	--wecoffee-radius-lg: 8px;
	--wecoffee-radius-xl: 12px;
	--wecoffee-radius-pill: 999px;

	/* ---- Shadows ---- */
	--wecoffee-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
	--wecoffee-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
	--wecoffee-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);

	/* ---- Transitions ---- */
	--wecoffee-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
	--wecoffee-duration: 200ms;
	--wecoffee-duration-slow: 400ms;
	--wecoffee-transition: var(--wecoffee-duration) var(--wecoffee-ease);
	--wecoffee-transition-slow: var(--wecoffee-duration-slow) var(--wecoffee-ease);
}