/**
 * HUG'N SIP — Design tokens
 * Warm modern retail · approachable specialty coffee
 */

:root {
	/* Surfaces */
	--hns-bg: #f7f4ef;
	--hns-bg-elevated: #ffffff;
	--hns-bg-muted: #efe9e1;
	--hns-bg-warm: #e8e0d6;

	/* Text */
	--hns-text: #2d2926;
	--hns-text-secondary: #5a534d;
	--hns-text-tertiary: #7a726a;
	--hns-text-inverse: #ffffff;

	/* Brand */
	--hns-accent: #6b4f3a;
	--hns-accent-hover: #564032;
	--hns-accent-soft: #8a6d58;
	--hns-accent-muted: #b8a090;

	/* Borders */
	--hns-border: #ddd5cb;
	--hns-border-subtle: #e8e2da;

	/* Legacy aliases */
	--hns-cream: var(--hns-bg);
	--hns-cream-deep: var(--hns-bg-muted);
	--hns-cream-card: var(--hns-bg-elevated);
	--hns-cream-muted: var(--hns-border);
	--hns-espresso: var(--hns-text);
	--hns-espresso-soft: var(--hns-text-secondary);
	--hns-copper: var(--hns-accent-soft);
	--hns-copper-light: var(--hns-accent-muted);
	--hns-text-muted: var(--hns-text-secondary);
	--hns-text-soft: var(--hns-text-tertiary);
	--hns-white: var(--hns-bg-elevated);

	/* Typography — Barlow retail */
	--hns-font-body: "Barlow", system-ui, -apple-system, sans-serif;
	--hns-font-heading: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
	--hns-font-display: var(--hns-font-heading);

	--hns-text-xs: 0.75rem;
	--hns-text-sm: 0.875rem;
	--hns-text-base: 1rem;
	--hns-text-lg: 1.125rem;
	--hns-text-xl: 1.25rem;
	--hns-text-2xl: 1.5rem;

	--hns-leading-tight: 1.25;
	--hns-leading-normal: 1.5;
	--hns-leading-relaxed: 1.55;

	--hns-tracking-label: 0.04em;
	--hns-tracking-tight: 0;

	/* Spacing */
	--hns-space-1: 0.25rem;
	--hns-space-2: 0.5rem;
	--hns-space-3: 0.75rem;
	--hns-space-4: 1rem;
	--hns-space-5: 1.25rem;
	--hns-space-6: 1.5rem;
	--hns-space-8: 2rem;
	--hns-space-10: 2.5rem;
	--hns-space-12: 3rem;

	/* Layout — denser sections */
	--hns-max: 72rem;
	--hns-content: 36rem;
	--hns-section-pad: clamp(2rem, 4vw, 3rem);
	--hns-gutter: clamp(1rem, 3vw, 1.5rem);

	/* Radius — retail, not pill-heavy */
	--hns-radius-sm: 4px;
	--hns-radius: 8px;
	--hns-radius-lg: 12px;
	--hns-radius-pill: 6px;

	/* Elevation — subtle */
	--hns-shadow-sm: 0 1px 2px rgba(45, 41, 38, 0.05);
	--hns-shadow: 0 2px 8px rgba(45, 41, 38, 0.07);
	--hns-shadow-lg: 0 4px 16px rgba(45, 41, 38, 0.08);

	--hns-ease: ease;
	--hns-duration: 0.15s;
}