/**
 * Design tokens.
 *
 * Defines reusable custom properties for the dark premium starter system.
 * These tokens should be reskinned before adding client-specific content.
 */

:root,
:root[data-bws-theme="dark"] {
	color-scheme: dark;

	/* Colors */
	--bws-color-bg: #07090c;
	--bws-color-bg-soft: #0b0e12;
	--bws-color-surface: #10141a;
	--bws-color-surface-raised: #151a21;
	--bws-color-surface-muted: #0d1116;
	--bws-color-header-bg: rgba(7, 9, 12, 0.92);
	--bws-color-overlay: rgba(0, 0, 0, 0.62);
	--bws-gradient-media-overlay: linear-gradient(180deg, rgba(7, 9, 12, 0.08), rgba(7, 9, 12, 0.78));
	--bws-color-text: #f4f1ea;
	--bws-color-text-soft: #cfc9bd;
	--bws-color-muted: #928d84;
	--bws-color-border: rgba(255, 255, 255, 0.07);
	--bws-color-border-strong: rgba(255, 255, 255, 0.12);
	--bws-color-primary: #d6ad62;
	--bws-color-primary-hover: #e7bd70;
	--bws-color-primary-soft: rgba(214, 173, 98, 0.08);
	--bws-color-primary-border: rgba(214, 173, 98, 0.18);
	--bws-color-primary-contrast: #11100c;
	--bws-color-secondary: #223047;
	--bws-color-secondary-hover: #2c3c59;
	--bws-color-success: #6fd6a5;
	--bws-color-warning: #f0c56b;
	--bws-color-error: #ff8a8a;
	--bws-color-focus: #f6d58a;
	--bws-color-selection-bg: rgba(217, 180, 111, 0.35);
	--bws-color-selection-text: #ffffff;

	/* Typography */
	--bws-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--bws-font-size-xs: 0.75rem;
	--bws-font-size-sm: 0.875rem;
	--bws-font-size-md: 1rem;
	--bws-font-size-lg: 1.125rem;
	--bws-font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
	--bws-font-size-2xl: clamp(1.55rem, 1.25rem + 1.35vw, 2rem);
	--bws-font-size-3xl: clamp(2rem, 1.55rem + 2vw, 2.75rem);
	--bws-line-height-tight: 1.08;
	--bws-line-height-heading: 1.18;
	--bws-line-height-body: 1.62;
	--bws-font-weight-regular: 400;
	--bws-font-weight-medium: 500;
	--bws-font-weight-semibold: 600;
	--bws-font-weight-bold: 700;

	/* Spacing */
	--bws-space-1: 0.25rem;
	--bws-space-2: 0.5rem;
	--bws-space-3: 0.75rem;
	--bws-space-4: 1rem;
	--bws-space-5: 1.25rem;
	--bws-space-6: 1.5rem;
	--bws-space-8: 2rem;
	--bws-space-10: 2.5rem;
	--bws-space-12: 3rem;
	--bws-space-16: 4rem;
	--bws-space-20: 5rem;

	/* Radius */
	--bws-radius-xs: 0.25rem;
	--bws-radius-sm: 0.5rem;
	--bws-radius-md: 0.6875rem;
	--bws-radius-lg: 0.875rem;
	--bws-radius-xl: 1.125rem;
	--bws-radius-pill: 999px;

	/* Shadows */
	--bws-shadow-sm: 0 0.625rem 1.75rem rgba(0, 0, 0, 0.16);
	--bws-shadow-md: 0 1rem 2.75rem rgba(0, 0, 0, 0.22);
	--bws-shadow-lg: 0 1.75rem 4.5rem rgba(0, 0, 0, 0.28);
	--bws-shadow-focus: 0 0 0 0.1875rem rgba(214, 173, 98, 0.3);

	/* Borders */
	--bws-border-width: 1px;
	--bws-border-subtle: var(--bws-border-width) solid var(--bws-color-border);
	--bws-border-strong: var(--bws-border-width) solid var(--bws-color-border-strong);

	/* Transitions */
	--bws-transition-fast: 150ms ease;
	--bws-transition-base: 220ms ease;
	--bws-transition-slow: 360ms ease;

	/* Buttons */
	--bws-button-height: 3rem;
	--bws-button-padding-inline: 1.25rem;
	--bws-button-radius: 0.5625rem;
	--bws-button-font-weight: var(--bws-font-weight-semibold);
	--bws-button-transition: 160ms ease;
	--bws-button-primary-bg: var(--bws-color-text);
	--bws-button-primary-color: var(--bws-color-bg);
	--bws-button-primary-hover: var(--bws-color-text-soft);
	--bws-button-secondary-bg: transparent;
	--bws-button-secondary-border: var(--bws-color-border-strong);
	--bws-button-secondary-hover: var(--bws-color-surface-raised);
	--bws-button-disabled-opacity: 0.48;

	/* Containers */
	--bws-container-sm: 40rem;
	--bws-container-md: 56rem;
	--bws-container-lg: 72rem;
	--bws-container-xl: 82rem;
	--bws-container-padding: clamp(1rem, 4.5vw, 1.5rem);

	/* Z-index layers */
	--bws-z-base: 1;
	--bws-z-sticky: 20;
	--bws-z-header: 30;
	--bws-z-drawer: 40;
	--bws-z-modal: 50;
	--bws-z-toast: 60;
}

:root[data-bws-theme="light"] {
	color-scheme: light;

	/* Colors */
	--bws-color-bg: #f7f4ee;
	--bws-color-bg-soft: #f0ece3;
	--bws-color-surface: #ffffff;
	--bws-color-surface-raised: #fbf8f1;
	--bws-color-surface-muted: #f1ede5;
	--bws-color-header-bg: rgba(247, 244, 238, 0.92);
	--bws-color-overlay: rgba(23, 21, 18, 0.42);
	--bws-gradient-media-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.85));
	--bws-color-text: #171512;
	--bws-color-text-soft: #3f3931;
	--bws-color-muted: #6d665b;
	--bws-color-border: rgba(23, 21, 18, 0.11);
	--bws-color-border-strong: rgba(23, 21, 18, 0.18);
	--bws-color-primary: #b98224;
	--bws-color-primary-hover: #9f6b18;
	--bws-color-primary-soft: rgba(185, 130, 36, 0.12);
	--bws-color-primary-border: rgba(185, 130, 36, 0.28);
	--bws-color-primary-contrast: #100f0c;
	--bws-color-secondary: #e8edf5;
	--bws-color-secondary-hover: #dce4ef;
	--bws-color-success: #227a52;
	--bws-color-warning: #8a5c0a;
	--bws-color-error: #ad3434;
	--bws-color-focus: #9f6b18;
	--bws-color-selection-bg: rgba(185, 130, 36, 0.22);
	--bws-color-selection-text: #171512;

	/* Shadows */
	--bws-shadow-sm: 0 0.625rem 1.75rem rgba(23, 21, 18, 0.08);
	--bws-shadow-md: 0 1rem 2.75rem rgba(23, 21, 18, 0.12);
	--bws-shadow-lg: 0 1.75rem 4.5rem rgba(23, 21, 18, 0.16);
	--bws-shadow-focus: 0 0 0 0.1875rem rgba(185, 130, 36, 0.25);
}