/*
	Dialog tokens of the backoffice (session 104): the --fs-dialog-* set that dialogs.css reads, mapped
	onto the UBold theme variables (furnstream-skin.css carries the light ground), so all ten skins and
	both themes follow automatically. This file is the only place that knows the client's theme attribute.
	Every tint, text tone, veil and shadow is derived from the theme's solid colours (--theme-primary,
	--theme-danger, …, --theme-black) with color-mix, never from the *-bg-subtle / *-text-emphasis
	derivatives: those are pinned to the default palette by furnstream-skin.css and would paint a Retro
	or Neon skin in the default purple.
*/

:root {
	--fs-dialog-bg: var(--theme-secondary-bg);
	--fs-dialog-bg-raised: var(--theme-tertiary-bg);
	--fs-dialog-bg-sunken: var(--theme-body-bg);
	--fs-dialog-border: var(--theme-border-color);

	--fs-dialog-heading: var(--theme-heading-color);
	--fs-dialog-text: var(--theme-body-color);
	/* AA (§11): the tints carry 14 % of the tone, the text tones 30 % of the tone on black (the audited depth). */
	--fs-dialog-muted: color-mix(in srgb, var(--theme-secondary-color) 65%, var(--theme-black));

	--fs-dialog-primary: var(--theme-primary);
	--fs-dialog-primary-subtle: color-mix(in srgb, var(--theme-primary) 14%, var(--theme-secondary-bg));
	--fs-dialog-primary-text: color-mix(in srgb, var(--theme-primary) 30%, var(--theme-black));
	--fs-dialog-primary-glow: color-mix(in srgb, var(--theme-primary) 35%, transparent);
	--fs-dialog-on-primary: var(--theme-white);
	--fs-dialog-danger: var(--theme-danger);
	--fs-dialog-danger-subtle: color-mix(in srgb, var(--theme-danger) 14%, var(--theme-secondary-bg));
	--fs-dialog-danger-text: color-mix(in srgb, var(--theme-danger) 30%, var(--theme-black));
	--fs-dialog-success: var(--theme-success);
	--fs-dialog-success-subtle: color-mix(in srgb, var(--theme-success) 14%, var(--theme-secondary-bg));
	--fs-dialog-success-text: color-mix(in srgb, var(--theme-success) 30%, var(--theme-black));
	--fs-dialog-warning: var(--theme-warning);
	--fs-dialog-warning-subtle: color-mix(in srgb, var(--theme-warning) 14%, var(--theme-secondary-bg));
	--fs-dialog-warning-text: color-mix(in srgb, var(--theme-warning) 30%, var(--theme-black));
	--fs-dialog-info: var(--theme-info);
	--fs-dialog-info-subtle: color-mix(in srgb, var(--theme-info) 14%, var(--theme-secondary-bg));
	--fs-dialog-info-text: color-mix(in srgb, var(--theme-info) 30%, var(--theme-black));
	--fs-dialog-neutral-subtle: var(--theme-tertiary-bg);
	/* The meaningful bars (meter, progress, segmented bar) and the busy bar: the primary, lightened in the dark theme for 3 : 1 on their tracks. */
	--fs-dialog-bar: var(--theme-primary);

	--fs-dialog-radius: 18px;
	--fs-dialog-radius-control: 10px;
	--fs-dialog-radius-tile: 13px;
	--fs-dialog-radius-toast: 14px;
	--fs-dialog-shadow: var(--furnstream-floating-shadow);
	--fs-dialog-veil: color-mix(in srgb, var(--theme-black) 40%, transparent);
	--fs-dialog-veil-blur: 5px;

	--fs-dialog-font-family: var(--theme-font-sans-serif);
	--fs-dialog-title-size: 17px;
	--fs-dialog-title-weight: 800;

	/* Buttons: the theme's small button (btn-sm) in height and type; the cancel is the theme's neutral button (btn-neutral). */
	--fs-dialog-button-height: 32px;
	--fs-dialog-button-radius: 10px;
	--fs-dialog-button-height-touch: 46px;
	--fs-dialog-button-font-size: .8125rem;
	--fs-dialog-button-padding-x: 14px;
	--fs-dialog-ghost-bg: var(--theme-secondary-bg);
	--fs-dialog-ghost-border: var(--theme-border-color);
	--fs-dialog-ghost-text: var(--theme-body-color);
	--fs-dialog-ghost-hover-bg: var(--theme-secondary-bg);
	--fs-dialog-ghost-hover-border: var(--theme-primary);
	--fs-dialog-ghost-hover-text: var(--theme-primary);
	--fs-dialog-ghost-shadow: var(--theme-box-shadow);

	--fs-dialog-toast-top: calc(var(--theme-topbar-height) + 12px);
	--fs-dialog-z: 1090;
}

html[data-bs-theme="dark"] {
	--fs-dialog-muted: color-mix(in srgb, var(--theme-secondary-color) 75%, var(--theme-heading-color));
	--fs-dialog-primary-subtle: color-mix(in srgb, var(--theme-primary) 22%, var(--theme-secondary-bg));
	--fs-dialog-primary-text: color-mix(in srgb, var(--theme-primary) 30%, var(--theme-heading-color));
	--fs-dialog-danger-subtle: color-mix(in srgb, var(--theme-danger) 22%, var(--theme-secondary-bg));
	--fs-dialog-danger-text: color-mix(in srgb, var(--theme-danger) 30%, var(--theme-heading-color));
	--fs-dialog-success-subtle: color-mix(in srgb, var(--theme-success) 22%, var(--theme-secondary-bg));
	--fs-dialog-success-text: color-mix(in srgb, var(--theme-success) 30%, var(--theme-heading-color));
	--fs-dialog-warning-subtle: color-mix(in srgb, var(--theme-warning) 22%, var(--theme-secondary-bg));
	--fs-dialog-warning-text: color-mix(in srgb, var(--theme-warning) 30%, var(--theme-heading-color));
	--fs-dialog-info-subtle: color-mix(in srgb, var(--theme-info) 22%, var(--theme-secondary-bg));
	--fs-dialog-info-text: color-mix(in srgb, var(--theme-info) 30%, var(--theme-heading-color));
	--fs-dialog-bar: color-mix(in srgb, var(--theme-primary) 45%, var(--theme-heading-color));
	--fs-dialog-veil: color-mix(in srgb, var(--theme-black) 55%, transparent);
}