// CSS custom properties exposing the design tokens to plain CSS consumers.
// Apps that load dist/css/kit.css without a SCSS build can still style
// custom components on-palette with var(--gn-*) instead of raw hex values.
// Keep in sync with the SCSS tokens; the SCSS tokens stay the source of truth.

@use "kit-deps" as *;
@use "components/typography" as *;

:root {
	// neutrals
	--gn-color-black: #{$color-black};
	--gn-color-dark: #{$color-dark};
	--gn-color-grey: #{$color-grey};

	// text tones
	--gn-color-text-light: #{$color-text-light};
	--gn-color-text-medium: #{$color-text-medium};
	--gn-color-text-dark: #{$color-text-dark};

	// UI state
	--gn-color-primary: #{$color-primary};
	--gn-color-secondary: #{$color-secondary};
	--gn-color-accent: #{$color-accent};
	--gn-color-success: #{$color-success};
	--gn-color-warning: #{$color-warning};
	--gn-color-error: #{$color-error};
	--gn-color-info: #{$color-info};

	// surfaces
	--gn-surface-page: #{$surface-page};
	--gn-surface-panel: #{$surface-panel};
	--gn-surface-panel-muted: #{$surface-panel-muted};
	--gn-surface-panel-strong: #{$surface-panel-strong};

	// borders
	--gn-border-width-base: #{$border-width-base};
	--gn-border-width-accent: #{$border-width-accent};
	--gn-border-width-choice: #{$border-width-choice};
	--gn-border-style-base: #{$border-style-base};
	--gn-border-color-base: #{$border-color-base};
	--gn-border-color-muted: #{$border-color-muted};

	// focus
	--gn-focus-outline-width: #{$focus-outline-width};
	--gn-focus-outline-offset: #{$focus-outline-offset};
	--gn-focus-outline-color: #{$focus-outline-color};

	// motion
	--gn-motion-fast: #{$motion-fast};
	--gn-motion-base: #{$motion-base};
	--gn-motion-slow: #{$motion-slow};
	--gn-motion-ease: #{$motion-ease};

	// typography
	--gn-font-family-base: #{$font-family-base};
	--gn-font-weight-regular: #{$font-weight-regular};
	--gn-font-weight-medium: #{$font-weight-medium};
	--gn-font-weight-semibold: #{$font-weight-semibold};
	--gn-font-weight-bold: #{$font-weight-bold};
	--gn-font-size-xs: #{$font-size-xs};
	--gn-font-size-sm: #{$font-size-sm};
	--gn-font-size-md: #{$font-size-md};
	--gn-font-size-base: #{$font-size-base};
	--gn-font-size-lg: #{$font-size-lg};
	--gn-font-size-xl: #{$font-size-xl};
	--gn-line-height-tight: #{$line-height-tight};
	--gn-line-height-normal: #{$line-height-normal};
	--gn-line-height-relaxed: #{$line-height-relaxed};

	// spacing scale
	@each $index, $value in $spaces {
		--gn-space-#{$index}: #{$value};
	}
}