/**
 * VegasOdds 2026 practical design tokens.
 *
 * Values are extracted from the approved mobile/desktop foundations. The
 * system stacks avoid both a remote dependency and redistribution of font
 * binaries whose license notices are absent from this repository.
 */

:root {
	/* Brand and state */
	--vo-color-brand: #850026;
	--vo-color-brand-strong: #5d001a;
	--vo-color-brand-soft: #f7e9ed;
	--vo-color-success: #087658;
	--vo-color-success-soft: #eff8f5;
	--vo-color-warning: #9a5700;
	--vo-color-danger: #a61b3d;
	--vo-color-rating: #e76500;

	/* Surfaces and borders */
	--vo-color-bg: #ffffff;
	--vo-color-surface: #ffffff;
	--vo-color-surface-muted: #f1efed;
	--vo-color-surface-warm: #faf7f8;
	--vo-color-border: #ded9d5;
	--vo-color-border-warm: #ded9d5;
	--vo-color-border-strong: #b9b3b0;

	/* Text */
	--vo-color-ink: #17161a;
	--vo-color-text: #222126;
	--vo-color-text-muted: #66636c;
	--vo-color-text-soft: #817d85;
	--vo-color-text-inverse: #ffffff;
	--vo-color-link: var(--vo-color-brand);
	--vo-color-link-hover: var(--vo-color-brand-strong);
	--vo-color-focus: #1167d8;
	--vo-color-focus-ring: rgba(17, 103, 216, 0.28);

	/* Typography */
	--vo-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
	--vo-font-display: var(--vo-font-sans);
	--vo-font-size-2xs: 0.625rem;
	--vo-font-size-xs: 0.75rem;
	--vo-font-size-sm: 0.875rem;
	--vo-font-size-md: 1rem;
	--vo-font-size-lg: 1.25rem;
	--vo-font-size-xl: clamp(1.65rem, 3vw, 2.4rem);
	--vo-font-size-2xl: clamp(2.35rem, 6vw, 4rem);
	--vo-line-height-tight: 1.12;
	--vo-line-height-body: 1.5;
	--vo-font-weight-regular: 400;
	--vo-font-weight-medium: 500;
	--vo-font-weight-semibold: 600;
	--vo-font-weight-bold: 700;
	--vo-label-tracking: 0.055em;

	/* Four-pixel spacing scale */
	--vo-space-1: 0.25rem;
	--vo-space-2: 0.5rem;
	--vo-space-3: 0.75rem;
	--vo-space-4: 1rem;
	--vo-space-5: 1.5rem;
	--vo-space-6: 2rem;
	--vo-space-7: 3rem;
	--vo-space-8: 4rem;
	--vo-space-9: 5rem;
	--vo-control-inset: var(--vo-space-3);
	--vo-card-inset: clamp(1rem, 2vw, 1.5rem);
	--vo-section-gap: clamp(2rem, 4vw, 3rem);
	--vo-reading-rhythm: 1.5rem;

	/* Layout */
	--vo-container-max: 80rem;
	--vo-reading-max: 50rem;
	--vo-container-pad: 1rem;
	--vo-header-height: 4rem;
	--vo-bottom-nav-height: 4rem;
	--vo-touch-target: 2.75rem;
	--vo-radius-xs: 0.125rem;
	--vo-radius-sm: 0.375rem;
	--vo-radius-md: 0.625rem;
	--vo-radius-lg: 0.625rem;
	--vo-radius-xl: 0.75rem;
	--vo-radius-pill: 999px;
	--vo-shadow-card: 0 1px 3px rgba(32, 35, 40, 0.08);
	--vo-shadow-shell: 0 1px 0 rgba(32, 35, 40, 0.08);

	/* Breakpoint references; media queries use literal values. */
	--vo-bp-md: 48rem;
	--vo-bp-lg: 64rem;
	--vo-bp-xl: 75rem;

	/* Shell z-index */
	--vo-z-header: 100;
	--vo-z-bottom-nav: 180;
	--vo-z-nav-mobile: 220;
}

@media (min-width: 48rem) {
	:root {
		--vo-container-pad: 1.5rem;
		--vo-header-height: 4rem;
	}
}