/*
 * SKC design tokens — single source of truth for SKATE INSTITUTION design.
 * Components must consume these CSS custom properties; raw color or px values
 * are not allowed in component CSS so the system stays coherent.
 */

:root {
	/* Palette */
	--skc-primary: #000000;
	--skc-on-primary: #ffffff;
	--skc-secondary: #5d5f5f;
	--skc-secondary-container: #dfe0e0;
	--skc-background: #f9f9f9;
	--skc-surface: #f9f9f9;
	--skc-surface-bright: #f3f3f3;
	--skc-surface-container-highest: #e2e2e2;
	--skc-outline: #000000;
	--skc-outline-variant: #cfc4c5;
	--skc-error: #b3261e;
	--skc-on-background: #1a1c1c;
	--skc-on-surface: #1a1c1c;
	--skc-on-surface-variant: #4c4546;
	--skc-surface-container: #eeeeee;
	--skc-surface-container-high: #e8e8e8;
	--skc-surface-container-low: #f3f3f3;

	/* Brand colors (no dark/light variants — fixed brand identity). */
	--skc-whatsapp: #25d366;

	/* Spacing tokens */
	--skc-base: 4px;
	--skc-xs: 8px;
	--skc-sm: 16px;
	--skc-md: 24px;
	--skc-lg: 48px;
	--skc-xl: 80px;
	--skc-gutter: 20px;
	--skc-margin-mobile: 16px;
	--skc-margin-desktop: 40px;

	/* Typography scale */
	--skc-display-xl: 80px;
	--skc-display-lg: 48px;
	--skc-headline-lg: 32px;
	--skc-headline-md: 24px;
	--skc-body-lg: 18px;
	--skc-body-md: 14px;
	--skc-label-md: 12px;
	--skc-price-md: 14px;

	/* Layout */
	--skc-header-height: 80px;
	--skc-max-width: 1440px;
	--skc-sidebar-width: 280px;

	/* Borders */
	--skc-border: 1px solid var(--skc-primary);
	--skc-border-subtle: 1px solid var(--skc-surface-container-highest);

	/* Motion */
	--skc-transition: 0.2s ease;
	--skc-transition-slow: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@media (max-width: 768px) {
	:root {
		--skc-display-xl: 40px;
		--skc-display-lg: 36px;
		--skc-headline-lg: 26px;
		--skc-headline-md: 20px;
		--skc-body-lg: 16px;
		--skc-margin-desktop: var(--skc-margin-mobile);
	}
}