// Base colors
$base-color: var(--tify-base-color, #06b) !default;
$base-color-dark: var(
	--tify-base-color-dark,
	oklch(from $base-color calc(l * 1.5) c h)
) !default;

// Semantic colors
$bg: var(
	--tify-bg-color,
	light-dark(
		#fff,
		oklch(from $base-color-dark calc(l * .25) calc(c * .05) h)
	)
) !default;
$base-color-pale: var(
	--tify-base-color-pale,
	light-dark(
		color-mix(in oklch, $base-color, $bg 45%),
		color-mix(in oklch, $base-color-dark, $bg 45%)
	)
) !default;
$base-color-paler: var(
	--tify-base-color-paler,
	light-dark(
		color-mix(in oklch, $base-color, $bg 90%),
		color-mix(in oklch, $base-color-dark, $bg 90%)
	)
) !default;
$border-color: var(
	--tify-border-color,
	light-dark(
		oklch(from $base-color calc(l * .5) calc(c * .1) h / 15%),
		oklch(from $base-color-dark calc(l * 2) calc(c * .1) h / 15%)
	)
) !default;
$link-color: var(
	--tify-link-color,
	light-dark(
		$base-color,
		$base-color-dark
	)
) !default;
$link-hover-color: var(
	--tify-link-hover-color,
	light-dark(
		color-mix(in oklch, $link-color 90%, black),
		color-mix(in oklch, $link-color 90%, white)
	)
) !default;
$text-color: var(
	--tify-text-color,
	light-dark(
		currentcolor,
		oklch(from currentcolor 100% c h)
	)
) !default;
$text-color-inverted: var(
	--tify-text-color-inverted,
	light-dark(
		oklch(from currentcolor 100% c h),
		oklch(from currentcolor 0% c h)
	)
) !default;
$text-color-muted: var(
	--tify-text-color-muted,
	// NOTE: Using color-mix() instead of oklch() for Firefox 128 ESR
	color-mix(in oklch, currentcolor 61.8%, transparent)
) !default;

// Dimensions
$br: var(--tify-border-radius, 2px) !default;
$demo-sidebar-width: 12rem;
$font-size: var(--tify-font-size, inherit) !default;
$font-size-small: var(--tify-font-size-small, max(.75em, 12px)) !default;
$grid-base: var(--tify-grid-base, 1.5em) !default;
$line-height: var(--tify-line-height, inherit) !default;
$thumbnail-height: var(--tify-thumbnail-height, g(4.5)) !default;
$thumbnail-width: var(--tify-thumbnail-width, g(4)) !default;

// Timings
$td: var(--tify-transition-duration, .4s) !default;

// Breakpoints
// NOTE: This is not configurable via CSS custom properties,
// which cannot be used in @container queries.
$small: 'width > 719px' !default;
$medium: 'width > 959px' !default;
$large: 'width > 1199px' !default;

// Combined values
$blur: blur(8px) !default;
$button-bg: var(
	--tify-button-bg,
	light-dark(
		oklch(from $base-color 95% calc(c * .02) h),
		oklch(from $base-color-dark 25% calc(c * .02) h)
	)
) !default;
$button-hover-bg: var(
	--tify-button-hover-bg,
	light-dark(
		oklch(from $base-color 98% calc(c * .02) h),
		oklch(from $base-color-dark 22% calc(c * .02) h)
	)
) !default;
$drop-shadow: 0 0 g(.25) oklch(0% 0 0deg / 25%) !default;
$dropdown-bg: $bg !default;
$header-bg: $bg !default;
$highlight-bg: var(
	--tify-highlight-bg,
	oklch(from currentcolor l calc(c * .1) h / 5%)
) !default;
$inset-shadow: 0 .5px 3px $border-color inset !default;
$main-bg: var(
	--tify-body-bg,
	radial-gradient(
		light-dark(#aaa, #333) 1px,
		light-dark(#bbb, #444) 0
	) 2px 1px / 3px 3px
) !default;
$panel-bg: $bg !default;