/**
 * Kanubar Design Tokens
 * Source: design/DESIGN-SYSTEM.md
 * Mobile-First: Base values are mobile, desktop overrides via media query
 */

:root {
	/* === COLORS === */

	/* Primary: Wald-Gruen */
	--color-primary: #15803D;
	--color-primary-light: #22C55E;
	--color-primary-dark: #166534;
	--color-on-primary: #FFFFFF;

	/* Secondary: Havel-Blau */
	--color-secondary: #0284C7;
	--color-secondary-light: #38BDF8;
	--color-secondary-dark: #0369A1;
	--color-on-secondary: #FFFFFF;

	/* Accent: Sonnen-Gold */
	--color-accent: #D97706;
	--color-accent-light: #FBBF24;
	--color-accent-dark: #B45309;
	--color-on-accent: #FFFFFF;

	/* Neutral */
	--color-foreground: #0F172A;
	--color-muted-foreground: #64748B;
	--color-border: #E2E8F0;
	--color-muted: #F0F7F3;
	--color-background: #FAFCFA;
	--color-surface: #FFFFFF;

	/* Functional */
	--color-destructive: #DC2626;
	--color-success: #16A34A;
	--color-ring: #15803D;

	/* === TYPOGRAPHY === */

	--font-heading: 'Outfit', sans-serif;
	--font-body: 'Work Sans', sans-serif;

	/* Mobile-First Sizes */
	--text-h1: 2rem;          /* 32px */
	--text-h2: 1.5rem;        /* 24px */
	--text-h3: 1.25rem;       /* 20px */
	--text-h4: 1.125rem;      /* 18px */
	--text-body: 1rem;         /* 16px */
	--text-small: 0.875rem;   /* 14px */
	--text-cta: 1.125rem;     /* 18px */
	--text-label: 0.75rem;    /* 12px */
	--text-price: 1.75rem;    /* 28px */

	/* Line Heights */
	--leading-h1: 1.1;
	--leading-h2: 1.2;
	--leading-h3: 1.3;
	--leading-h4: 1.3;
	--leading-body: 1.6;
	--leading-small: 1.5;
	--leading-cta: 1.2;

	/* === SPACING === */

	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;
	--space-2xl: 48px;
	--space-3xl: 64px;
	--space-4xl: 96px;

	/* === LAYOUT === */

	--container-max: 1200px;
	--container-padding: var(--space-md);

	/* === BORDER RADIUS === */

	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-full: 9999px;

	/* === SHADOWS === */

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 1px 3px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12);
	--shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15);

	/* === TRANSITIONS === */

	--transition-fast: 150ms ease-out;
	--transition-base: 250ms ease-out;
	--transition-slow: 400ms ease-out;

	/* === Z-INDEX === */

	--z-base: 0;
	--z-raised: 10;
	--z-dropdown: 20;
	--z-sticky: 40;
	--z-modal: 100;
	--z-toast: 1000;

	/* === COMPONENT TOKENS === */

	/* Buttons */
	--btn-primary-bg: var(--color-accent);
	--btn-primary-text: var(--color-on-accent);
	--btn-primary-hover: var(--color-accent-light);
	--btn-primary-active: var(--color-accent-dark);
	--btn-primary-radius: var(--radius-md);
	--btn-primary-height: 48px;

	/* Cards */
	--card-radius: var(--radius-lg);
	--card-shadow: var(--shadow-md);
	--card-shadow-hover: var(--shadow-lg);
	--card-bg: var(--color-surface);

	/* Navigation */
	--nav-height-mobile: 56px;
	--nav-height-desktop: 72px;
	--nav-bg: var(--color-surface);
	--nav-z: var(--z-sticky);

	/* Sticky CTA */
	--sticky-cta-height: 56px;
	--sticky-cta-bg: var(--color-accent);
	--sticky-cta-z: var(--z-sticky);
	--sticky-cta-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* Breakpoints: 375px (sm), 768px (md), 1024px (lg), 1440px (xl) */

@media (min-width: 1024px) {
	:root {
		--text-h1: 3.5rem;      /* 56px */
		--text-h2: 2.5rem;      /* 40px */
		--text-h3: 1.75rem;     /* 28px */
		--text-h4: 1.375rem;    /* 22px */
		--text-body: 1.125rem;  /* 18px */
		--text-small: 1rem;     /* 16px */
		--text-cta: 1.25rem;    /* 20px */
		--text-price: 2.25rem;  /* 36px */

		--container-padding: var(--space-lg);
	}
}