/**
 * Thủy Bích Vĩnh Long — Site Common Tokens
 * File: css/tb-site-common.css
 *
 * Owner:
 * - Global design tokens shared across site-specific CSS files.
 * - Brand colors, typography variables, spacing scale, radius, border, shadow, and focus ring.
 *
 * Not owner:
 * - Header layout. Use a future css/tb-header.css after legacy audit.
 * - Footer layout. Use a future css/tb-footer.css after legacy audit.
 * - Blog Hub / Single / Archive layout.
 * - WooCommerce PLP / PDP layout.
 * - Product card visual rules.
 *
 * Phase 12B rule:
 * - Additive only. Do not remove old variables yet.
 * - No page layout change expected.
 */

:root {
	/* Font */
	--tb-font: "Be Vietnam Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Core text */
	--tb-text: #1E2320;
	--tb-text-strong: #080C0A;
	--tb-text-soft: #444845;
	--tb-muted: #5D655F;
	--tb-muted-soft: #747874;
	--tb-muted-light: #A0A5A1;
	--tb-inverse-text: #EFF2ED;

	/* Surfaces */
	--tb-bg: #FFFFFF;
	--tb-bg-sage: #F7FAF5;
	--tb-surface: #F7F8F6;
	--tb-surface-soft: #EEF1EC;
	--tb-surface-card: #FFFFFF;
	--tb-surface-image: #FBFBFA;
	--tb-surface-warm: #F0EEE8;
	--tb-surface-warm-hover: #E7E1D6;
	--tb-surface-warm-active: #D8CDBE;

	/* Border */
	--tb-line: rgba(45, 52, 50, 0.12);
	--tb-line-soft: rgba(196, 207, 197, 0.42);
	--tb-line-subtle: rgba(30, 35, 32, 0.065);
	--tb-line-faint: rgba(30, 35, 32, 0.04);
	--tb-line-strong: #D8DBD6;
	--tb-border: #CBD5CC;

	/* Accent */
	--tb-brass: #A98A5E;
	--tb-brass-dark: #745A32;
	--tb-brass-soft: #F6EBDD;
	--tb-brass-text: #8A5A36;

	/* State */
	--tb-sale-red: #D63A2F;
	--tb-sale-red-hover: #C9332A;
	--tb-success: #2F7D4E;
	--tb-warning: #A66A00;
	--tb-danger: #BA1A1A;

	/* Radius */
	--tb-radius-xs: 2px;
	--tb-radius-sm: 3px;
	--tb-radius-md: 4px;
	--tb-radius-lg: 8px;
	--tb-radius-xl: 12px;
	--tb-radius-card: 7px;
	--tb-radius-full: 9999px;

	/* Spacing scale */
	--tb-space-1: 4px;
	--tb-space-2: 8px;
	--tb-space-3: 12px;
	--tb-space-4: 16px;
	--tb-space-5: 20px;
	--tb-space-6: 24px;
	--tb-space-8: 32px;
	--tb-space-10: 40px;
	--tb-space-12: 48px;
	--tb-space-16: 64px;
	--tb-space-24: 96px;

	/* Containers */
	--tb-container: 1280px;
	--tb-container-wide: 1540px;
	--tb-gutter: 24px;
	--tb-gutter-lg: 32px;

	/* Shadows */
	--tb-shadow-soft: 0 8px 24px rgba(30, 35, 32, 0.06);
	--tb-shadow-floating: 0 12px 32px rgba(30, 35, 32, 0.10);

	/* Focus */
	--tb-focus-ring: 2px solid rgba(169, 138, 94, 0.62);
	--tb-focus-offset: 3px;

	/* Shared component aliases */
	--tb-card-border: #E0E7DD;
	--tb-card-border-hover: rgba(150, 164, 153, 0.50);
	--tb-badge-bg: var(--tb-brass-soft);
	--tb-badge-text: var(--tb-brass-text);
}

/* Shared focus helper — opt-in only, does not change all site links/buttons. */
.tb-focusable:focus-visible,
.tb-site-common-focus:focus-visible {
	outline: var(--tb-focus-ring);
	outline-offset: var(--tb-focus-offset);
}