/**
 * Platform Design Tokens
 * Single source of truth for brand, semantic, and Bootstrap theme colors.
 * Adjust palette here — downstream CSS files consume these variables only.
 */
:root {
	/* Brand */
	--color-primary: #000000;
	--color-primary-soft: #3a3a3a;
	--color-primary-dark: #1f1f1f;
	--color-primary-rgb: 0, 0, 0;
	--color-primary-soft-rgb: 58, 58, 58;
	--color-primary-dark-rgb: 31, 31, 31;

	--color-secondary: #d9d9d9;
	--color-secondary-dark: #bfbfbf;
	--color-secondary-dark-rgb: 191, 191, 191;
	--color-secondary-rgb: 217, 217, 217;

	/* Surfaces & typography */
	--color-surface: #ffffff;
	--color-surface-muted: #f5f5f5;
	--color-surface-elevated: #ffffff;
	--color-heading: var(--color-primary);
	--color-body: #333333;
	--color-muted: #767676;
	--color-border: #e0e0e0;
	--color-border-subtle: #ededed;

	/* Semantic (muted, greyish hues that stay distinct and readable) */
	--color-success: #4f7a5a;
	--color-success-rgb: 79, 122, 90;
	--color-success-light: #d5e3d8;

	--color-danger: #a14e44;
	--color-danger-rgb: 161, 78, 68;
	--color-danger-light: #f3e3e0;

	--color-warning: #b08a2e;
	--color-warning-dark: #8a6b1f;
	--color-warning-rgb: 176, 138, 46;
	--color-warning-light: #f3ead3;

	/* Muted slate blue — distinct from black primary */
	--color-info: #4d6f80;
	--color-info-dark: #3a5562;
	--color-info-rgb: 77, 111, 128;
	--color-info-light: #dde7ec;

	/* Light tints (cards, badges, highlights) */
	--color-primary-light: #ebebeb;
	--color-secondary-light: #f2f2f2;
	--color-dark-light: #d0d0d0;

	/* PRO premium gradient (coffee → antique gold) */
	--pro-gradient-start: #c89210;
	--pro-gradient-middle: #e8be3f;
	--pro-gradient-end: #fff0b8;
	--pro-linear-gradient: linear-gradient(
		90deg,
		var(--pro-gradient-start) 0%,
		var(--pro-gradient-middle) 30%,
		var(--pro-gradient-end) 100%
	);

	/* Bootstrap 5 bridge */
	--bs-primary: var(--color-primary);
	--bs-primary-rgb: var(--color-primary-rgb);
	--bs-secondary: var(--color-secondary);
	--bs-secondary-rgb: var(--color-secondary-rgb);
	--bs-success: var(--color-success);
	--bs-success-rgb: var(--color-success-rgb);
	--bs-danger: var(--color-danger);
	--bs-danger-rgb: var(--color-danger-rgb);
	--bs-warning: var(--color-warning);
	--bs-warning-rgb: var(--color-warning-rgb);
	--bs-info: var(--color-info);
	--bs-info-rgb: var(--color-info-rgb);

	--bs-primary-text-emphasis: var(--color-primary-dark);
	--bs-primary-bg-subtle: var(--color-primary-light);
	--bs-primary-border-subtle: var(--color-secondary-dark);

	--bs-success-text-emphasis: #3b5c43;
	--bs-success-bg-subtle: var(--color-success-light);
	--bs-success-border-subtle: #bfd3c4;

	--bs-danger-text-emphasis: #7d3a32;
	--bs-danger-bg-subtle: var(--color-danger-light);
	--bs-danger-border-subtle: #e3c3bd;

	--bs-warning-text-emphasis: var(--color-warning-dark);
	--bs-warning-bg-subtle: var(--color-warning-light);
	--bs-warning-border-subtle: #e3d3a8;

	--bs-info-text-emphasis: var(--color-info-dark);
	--bs-info-bg-subtle: var(--color-info-light);
	--bs-info-border-subtle: #c3d4dc;

	--bs-secondary-color: var(--color-muted);
	--bs-tertiary-color: rgba(var(--color-primary-rgb), 0.55);

	--bs-btn-bg: var(--color-primary);
	--bs-btn-border-color: var(--color-primary);
	--bs-btn-hover-bg: var(--color-primary-dark);
	--bs-btn-hover-border-color: var(--color-primary-dark);
	--bs-link-color: var(--color-primary);
	--bs-link-hover-color: var(--color-primary-dark);

	--bs-form-valid-color: var(--color-success);
	--bs-form-valid-border-color: var(--color-success);
	--bs-form-invalid-color: var(--color-danger);
	--bs-form-invalid-border-color: var(--color-danger);

	/* Table */
	--bs-emphasis-color-rgb: var(--color-primary-rgb);

	/* Focus rings */
	--focus-ring-primary: 0 0 0 0.15rem rgba(var(--color-primary-rgb), 0.12);
	--focus-ring-warning: 0 0 0 0.15rem rgba(var(--color-warning-rgb), 0.12);
	--focus-ring-info: 0 0 0 0.15rem rgba(var(--color-info-rgb), 0.12);
	--bs-warning-focus-shadow: var(--focus-ring-warning);

	/* Scrollbar — thin, neutral, inherited by overflow:auto panels */
	--scrollbar-size: 6px;
	--scrollbar-thumb: var(--color-border);
	--scrollbar-thumb-hover: var(--color-muted);
	--scrollbar-track: transparent;

	scrollbar-width: thin;
	scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
	scroll-behavior: smooth;
}

::-webkit-scrollbar {
	width: var(--scrollbar-size);
	height: var(--scrollbar-size);
}

::-webkit-scrollbar-track {
	background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-thumb);
	border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--scrollbar-thumb-hover);
}