/*
 * The Tailwind theme of the chrome: every value a token of tokens.css on Tailwind's namespaces, so the recipes of
 * chrome.css and kit.css are written with the utility names the partner portal and rooster.systems use on Metronic 9
 * (bg-background, text-foreground, text-secondary-foreground, border-border, bg-muted, bg-card, rounded-lg, text-sm …).
 * `inline` makes a utility compile to the token's var() directly, so the light-dark() pairs of tokens.css reach every
 * utility. This file maps and never states a value (BuildTest checks); the one exception is the breakpoints, because
 * a media query cannot read a custom property: wp-admin's 782 px, where the admin menu collapses, then the chrome's.
 */

@theme inline {
	/* Colours, Metronic's names. */
	--color-page: var(--ra-page);
	--color-background: var(--ra-background);
	--color-foreground: var(--ra-foreground);
	--color-card: var(--ra-card);
	--color-card-foreground: var(--ra-card-foreground);
	--color-muted: var(--ra-muted);
	--color-muted-foreground: var(--ra-muted-foreground);
	--color-secondary-foreground: var(--ra-secondary-foreground);
	--color-border: var(--ra-border);
	--color-input: var(--ra-input);
	--color-control: var(--ra-control-border);
	--color-ring: var(--ra-ring);
	--color-mono: var(--ra-mono);
	--color-link: var(--ra-link);
	--color-ink: var(--ra-ink);
	--color-brand-dark: var(--ra-brand-dark);
	--color-primary: var(--ra-primary);
	--color-primary-foreground: var(--ra-primary-foreground);
	--color-primary-soft: var(--ra-primary-soft);
	--color-primary-soft-foreground: var(--ra-primary-soft-foreground);
	--color-success: var(--ra-success);
	--color-success-soft: var(--ra-success-soft);
	--color-success-wash: var(--ra-success-wash);
	--color-success-foreground: var(--ra-success-foreground);
	--color-warning: var(--ra-warning);
	--color-warning-soft: var(--ra-warning-soft);
	--color-warning-soft-foreground: var(--ra-warning-soft-foreground);
	--color-warning-border: var(--ra-warning-border);
	--color-destructive: var(--ra-destructive);
	--color-destructive-foreground: var(--ra-destructive-foreground);
	--color-info: var(--ra-info);
	--color-info-soft: var(--ra-info-soft);
	--color-info-wash: var(--ra-info-wash);
	--color-icon-manual: var(--ra-icon-manual);
	--color-icon-help: var(--ra-icon-help);
	--color-icon-feedback: var(--ra-icon-feedback);
	--color-icon-chat: var(--ra-icon-chat);
	--color-icon-welcome: var(--ra-icon-welcome);
	--color-icon-survey: var(--ra-icon-survey);
	--color-intro: var(--ra-intro-bg);
	--color-links: var(--ra-links-bg);
	--color-ai: var(--ra-ai-bg);
	--color-ai-spark: var(--ra-ai-spark);

	/* The product and the section (set per request by Colour::css()). */
	--color-product: var(--ra-product);
	--color-product-ink: var(--ra-product-ink);
	--color-product-on: var(--ra-product-on);
	--color-sec-ink: var(--ra-sec-ink, var(--ra-product-ink));
	--color-sec-on: var(--ra-sec-on, var(--ra-product-on));
	--color-accent: var(--ra-accent);
	--color-accent-on: var(--ra-accent-on);

	/* Spacing: the scale's unit (4 px), pinned so the admin's 13 px body never changes a recipe. */
	--spacing: var(--ra-spacing);

	/* Fonts: wp-admin's own stacks. */
	--font-sans: var(--ra-font-sans);
	--font-mono: var(--ra-font-mono);

	/* Shape: the scale (the roles, --ra-shape-*, are read by the recipes directly). */
	--radius-sm: var(--ra-radius-sm);
	--radius-md: var(--ra-radius-md);
	--radius-lg: var(--ra-radius-lg);
	--radius-xl: var(--ra-radius-xl);
	--radius-2xl: var(--ra-radius-2xl);

	/* Type: wp-admin's pixel scale. */
	--text-2xs: var(--ra-text-2xs);
	--text-2xs--line-height: var(--ra-leading-2xs);
	--text-xs: var(--ra-text-xs);
	--text-xs--line-height: var(--ra-leading-xs);
	--text-sm: var(--ra-text-sm);
	--text-sm--line-height: var(--ra-leading-sm);
	--text-base: var(--ra-text-base);
	--text-base--line-height: var(--ra-leading-base);
	--text-md: var(--ra-text-md);
	--text-md--line-height: var(--ra-leading-md);
	--text-lg: var(--ra-text-lg);
	--text-lg--line-height: var(--ra-leading-lg);
	--text-xl: var(--ra-text-xl);
	--text-xl--line-height: var(--ra-leading-xl);
	--text-2xl: var(--ra-text-2xl);
	--text-2xl--line-height: var(--ra-leading-2xl);
	--text-3xl: var(--ra-text-3xl);
	--text-3xl--line-height: var(--ra-leading-3xl);

	/* Shadows. */
	--shadow-sm: var(--ra-shadow-sm);
	--shadow-bar: var(--ra-shadow-bar);
	--shadow-pop: var(--ra-shadow-pop);
	--shadow-modal: var(--ra-shadow-modal);
	--shadow-focus: var(--ra-shadow-focus);

	/* Motion: what transition-* utilities use unless a recipe says otherwise. */
	--default-transition-duration: var(--ra-dur);
	--default-transition-timing-function: var(--ra-ease);
}

/* Breakpoints (max-* variants in the recipes): a media query cannot read a token, so these stay literal. */
@theme {
	--breakpoint-sm: 782px;
	--breakpoint-md: 960px;
	--breakpoint-lg: 1100px;
	--breakpoint-xl: 1280px;
	--breakpoint-2xl: 1600px;
}