/**
 * MiMusE Design Tokens
 * Version: 1.0.0
 *
 * Core design scales only.
 * Brand-specific values belong in assets/css/presets/*.css.
 */

:root {
	/* --------------------------------------------------
	   Layout
	-------------------------------------------------- */

	--mimuse-container: 1280px;
	--mimuse-content-narrow: 960px;

	/* --------------------------------------------------
	   Spacing
	-------------------------------------------------- */

	--mimuse-space-2xs: 4px;
	--mimuse-space-xs: 8px;
	--mimuse-space-sm: 16px;
	--mimuse-space-md: 24px;
	--mimuse-space-lg: 40px;
	--mimuse-space-xl: 64px;
	--mimuse-space-2xl: 88px;

	/* --------------------------------------------------
	   Radius
	-------------------------------------------------- */

	--mimuse-radius-xs: 4px;
	--mimuse-radius-sm: 6px;
	--mimuse-radius-md: 12px;
	--mimuse-radius-lg: 20px;
	--mimuse-radius-pill: 999px;

	/* --------------------------------------------------
	   Typography
	-------------------------------------------------- */

	--mimuse-font-body:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Tahoma,
		Arial,
		sans-serif;

	--mimuse-font-heading: var(--mimuse-font-body);

	--mimuse-font-size-xs: 12px;
	--mimuse-font-size-sm: 14px;
	--mimuse-font-size-md: 16px;
	--mimuse-font-size-lg: 18px;
	--mimuse-font-size-xl: 22px;
	--mimuse-font-size-2xl: 28px;
	--mimuse-font-size-3xl: 36px;
	--mimuse-font-size-4xl: 48px;

	--mimuse-font-weight-regular: 400;
	--mimuse-font-weight-medium: 500;
	--mimuse-font-weight-semibold: 600;
	--mimuse-font-weight-bold: 700;

	--mimuse-line-height-tight: 1.25;
	--mimuse-line-height-body: 1.6;
	--mimuse-line-height-relaxed: 1.75;

	/* --------------------------------------------------
	   Neutral Color Roles
	-------------------------------------------------- */

	--mimuse-text: #171717;
	--mimuse-muted: #6b7280;
	--mimuse-border: #e5e7eb;

	--mimuse-background: #ffffff;
	--mimuse-surface: #ffffff;
	--mimuse-surface-soft: #f7f7f7;
	--mimuse-surface-muted: #f3f4f6;

	/* --------------------------------------------------
	   Brand Roles
	   Overridden by a preset.
	-------------------------------------------------- */

	--mimuse-brand-primary: #171717;
	--mimuse-brand-primary-hover: #303030;
	--mimuse-brand-secondary: #171717;

	--mimuse-on-primary: #ffffff;
	--mimuse-on-secondary: #ffffff;

	/* --------------------------------------------------
	   Semantic Roles
	-------------------------------------------------- */

	--mimuse-action: var(--mimuse-brand-primary);
	--mimuse-action-hover: var(--mimuse-brand-primary-hover);
	--mimuse-action-text: var(--mimuse-on-primary);

	--mimuse-success: #17803d;
	--mimuse-warning: #a15c00;
	--mimuse-danger: #b42318;

	/* --------------------------------------------------
	   Component Scale
	-------------------------------------------------- */

	--mimuse-header-height: 76px;
	--mimuse-control-height-sm: 38px;
	--mimuse-control-height: 42px;
	--mimuse-button-height: 46px;
	--mimuse-button-height-lg: 52px;

	--mimuse-icon-sm: 18px;
	--mimuse-icon-md: 20px;

	/* --------------------------------------------------
	   Shadow
	-------------------------------------------------- */

	--mimuse-shadow-sm: 0 4px 14px rgba(0, 0, 0, .05);
	--mimuse-shadow-md: 0 12px 30px rgba(0, 0, 0, .06);
}