/*
 * BITSHOP COLOR CONTROL
 *
 * Change the brand values below to recolor the whole interface.
 * Every component in /local uses the semantic variables derived here.
 */
:root {
	--bitshop-brand-primary: #0b5cff;
	--bitshop-brand-secondary: #0b5cff;
	--bitshop-brand-ink: #46464b;
	--bitshop-brand-surface: #ffffff;
	--bitshop-error: #d92d20;
	--bitshop-error-background: #fff1f0;

	/* Semantic design roles. New UI must use these names instead of hue names. */
	--bitshop-color-accent: var(--bitshop-brand-primary);
	--bitshop-color-accent-secondary: var(--bitshop-brand-secondary);
	--bitshop-color-text: var(--bitshop-brand-ink);
	--bitshop-color-comparison-difference: color-mix(in srgb, var(--bitshop-brand-primary) 12%, var(--bitshop-brand-surface));
	--bitshop-color-surface: var(--bitshop-brand-surface);
	--bitshop-color-surface-muted: color-mix(in srgb, var(--bitshop-brand-ink) 7%, var(--bitshop-brand-surface));
	--bitshop-color-surface-interactive: color-mix(in srgb, var(--bitshop-brand-ink) 13%, var(--bitshop-brand-surface));
	--bitshop-color-surface-interactive-hover: color-mix(in srgb, var(--bitshop-brand-ink) 21%, var(--bitshop-brand-surface));
	--bitshop-color-border: color-mix(in srgb, var(--bitshop-brand-ink) 18%, var(--bitshop-brand-surface));

	--bitshop-space-1: 4px;
	--bitshop-space-2: 8px;
	--bitshop-space-3: 12px;
	--bitshop-space-4: 16px;
	--bitshop-space-5: 20px;
	--bitshop-space-6: 24px;
	--bitshop-space-8: 32px;
	--bitshop-space-10: 40px;
	--bitshop-radius-control: 8px;
	--bitshop-radius-card: 12px;
	--bitshop-radius-panel: 16px;
	--bitshop-control-height: 52px;
	--bitshop-content-width: 1320px;

	--bitshop-transparent: transparent;
	/* Backward-compatible aliases for older Bitrix template overrides. */
	--bitshop-graphite: var(--bitshop-color-text);
	--bitshop-graphite-dark: color-mix(in srgb, var(--bitshop-brand-ink) 72%, #000000);
	--bitshop-graphite-muted: color-mix(in srgb, var(--bitshop-brand-ink) 75%, var(--bitshop-brand-surface));
	--bitshop-graphite-soft: color-mix(in srgb, var(--bitshop-brand-ink) 45%, var(--bitshop-brand-surface));
	--bitshop-cyan: var(--bitshop-color-accent);
	--bitshop-cyan-dark: var(--bitshop-color-accent);
	--bitshop-cyan-soft: color-mix(in srgb, var(--bitshop-brand-ink) 7%, var(--bitshop-brand-surface));
	--bitshop-mint: var(--bitshop-color-accent-secondary);
	--bitshop-mint-dark: var(--bitshop-color-accent-secondary);
	--bitshop-mint-soft: color-mix(in srgb, var(--bitshop-brand-ink) 9%, var(--bitshop-brand-surface));
	--bitshop-white: var(--bitshop-color-surface);
	--bitshop-surface: var(--bitshop-color-surface);
	--bitshop-surface-soft: var(--bitshop-color-surface-muted);
	--bitshop-interactive-soft: var(--bitshop-color-surface-interactive);
	--bitshop-interactive-soft-hover: var(--bitshop-color-surface-interactive-hover);
	--bitshop-interactive-ink: color-mix(in srgb, var(--bitshop-brand-ink) 88%, var(--bitshop-brand-surface));
	--bitshop-border: var(--bitshop-color-border);
	--bitshop-selection: color-mix(in srgb, var(--bitshop-brand-primary) 22%, var(--bitshop-brand-surface));
	/* Permanent page surfaces are flat. Elevation is reserved for overlays. */
	--bitshop-elevation-surface: none;

	--bitshop-shadow: color-mix(in srgb, var(--bitshop-brand-ink) 16%, var(--bitshop-transparent));
	--bitshop-shadow-soft: color-mix(in srgb, var(--bitshop-brand-ink) 8%, var(--bitshop-transparent));
	--bitshop-shadow-strong: color-mix(in srgb, var(--bitshop-brand-ink) 45%, var(--bitshop-transparent));
	--bitshop-primary-glow: color-mix(in srgb, var(--bitshop-brand-primary) 24%, var(--bitshop-transparent));
	--bitshop-white-98: color-mix(in srgb, var(--bitshop-brand-surface) 98%, var(--bitshop-transparent));
	--bitshop-white-94: color-mix(in srgb, var(--bitshop-brand-surface) 94%, var(--bitshop-transparent));
	--bitshop-white-92: color-mix(in srgb, var(--bitshop-brand-surface) 92%, var(--bitshop-transparent));
	--bitshop-white-75: color-mix(in srgb, var(--bitshop-brand-surface) 75%, var(--bitshop-transparent));
	--bitshop-white-45: color-mix(in srgb, var(--bitshop-brand-surface) 45%, var(--bitshop-transparent));
	--bitshop-white-40: color-mix(in srgb, var(--bitshop-brand-surface) 40%, var(--bitshop-transparent));
	--bitshop-graphite-80: color-mix(in srgb, var(--bitshop-brand-ink) 80%, var(--bitshop-transparent));
}

::selection {
	background: var(--bitshop-selection);
	color: var(--bitshop-graphite);
}

::-moz-selection {
	background: var(--bitshop-selection);
	color: var(--bitshop-graphite);
}

/* Validation colors stay semantic and do not follow the site brand color. */
.errortext,
.invalid-feedback,
.form-error,
.bitshop-profile-message-error,
.bitshop-auth-alert-error,
.bitshop-company-error,
.bitshop-orders-empty-error {
	color: var(--bitshop-error) !important;
}

.alert-danger,
.bitshop-profile-message-error,
.bitshop-auth-alert-error,
.bitshop-companies-notice-error,
.bitshop-orders-empty-error {
	border-color: var(--bitshop-error) !important;
	background: var(--bitshop-error-background) !important;
	color: var(--bitshop-error) !important;
}

.has-error input,
.has-error select,
.has-error textarea,
[aria-invalid="true"] {
	border-color: var(--bitshop-error) !important;
}

input:focus,
select:focus,
textarea:focus {
	box-shadow: none;
}

font.starrequired,
.starrequired,
.form-required,
.bx-authform-starrequired,
.bitshop-company-label b,
.bitshop-profile-field b {
	color: var(--bitshop-error) !important;
}

.bx-yellow,
.bx-theme-yellow,
.bx-blue,
.bx-theme-blue,
.bx-red,
.bx-theme-red,
.bx-green,
.bx-theme-green {
	--primary: var(--bitshop-cyan-dark);
	--theme-color-primary: var(--bitshop-cyan);
	--theme-color-second: var(--bitshop-mint);
	--theme-color-light: var(--bitshop-mint-soft);
	--theme-b-link: var(--bitshop-cyan-dark);
	--theme-b-link-hover: var(--bitshop-graphite);
	--theme-b-tx-primary: var(--bitshop-white);
	--theme-b-bg-primary: var(--bitshop-cyan-dark);
	--theme-b-bd-primary: var(--bitshop-cyan-dark);
	--theme-b-sd-primary: var(--bitshop-primary-glow);
	--theme-b-tx-primary-hover: var(--bitshop-white);
	--theme-b-bg-primary-hover: var(--bitshop-graphite);
	--theme-b-bd-primary-hover: var(--bitshop-graphite);
	--theme-b-tx-primary-active: var(--bitshop-white);
	--theme-b-bg-primary-active: var(--bitshop-cyan-dark);
	--theme-b-bd-primary-active: var(--bitshop-cyan-dark);
	--theme-b-tx-primary-disabled: var(--bitshop-graphite-muted);
	--theme-b-bg-primary-disabled: var(--bitshop-mint-soft);
	--theme-b-bd-primary-disabled: var(--bitshop-border);
}