/*
 * Distribution material layer
 *
 * Product components consume the existing semantic corporate variables. This
 * file only changes their values at the distribution root; it deliberately
 * contains no page, sport, Arena or customer-specific selectors.
 */
html[data-distribution="casazar"] {
	/* CasAzar is a complete material system, not a cyan recolour.  All
	 * component contracts below resolve through these source tokens. */
	--cza-bg-primary: #080c0e;
	--cza-bg-secondary: #121316;
	--cza-bg-tertiary: #18191c;
	--cza-surface-1: #141519;
	--cza-surface-2: #1c1d22;
	--cza-surface-3: #23252a;
	--cza-gold-primary: #f5d08a;
	--cza-gold-secondary: #e6c06a;
	--cza-champagne: #f8ecd1;
	--cza-gold-muted: #b89441;
	--cza-gold-soft: #7a5e1f;
	--cza-gold-glow: rgba(245, 208, 138, 0.18);
	--cza-text-primary: #f6f4ee;
	--cza-text-secondary: #cfc7ae;
	--cza-text-muted: #8f8b71;
	--cza-text-invert: #0b0c0e;
	--cza-success: #7bcb8f;
	--cza-error: #e06a6a;
	--cza-warning: #f2c37a;
	--cza-info: #b89441;
	--cza-border-1: rgba(255, 255, 255, 0.06);
	--cza-border-2: rgba(245, 208, 138, 0.16);
	--cza-divider: rgba(255, 255, 255, 0.05);
	--cza-shadow-1: 0 12px 30px rgba(0, 0, 0, 0.55);
	--cza-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.65);
	--cza-glow-soft: 0 24px 56px rgba(245, 208, 138, 0.12);
	--cza-glow-strong: 0 0 48px rgba(245, 208, 138, 0.2);
	--cza-radius-sm: 8px;
	--cza-radius-md: 12px;
	--cza-radius-lg: 16px;
	/* Product pages which are not Arena use the same calm, uninterrupted
	 * graphite ground as CasAzar Home.  Decorative grids are Arena-only. */
	--cza-page-background: var(--cza-bg-primary);

	--brand-page: var(--cza-bg-primary);
	--brand-page-soft: var(--cza-bg-secondary);
	--brand-surface: var(--cza-surface-1);
	--brand-surface-elevated: color-mix(in srgb, var(--cza-surface-2) 94%, transparent);
	--brand-surface-strong: color-mix(in srgb, var(--cza-surface-3) 97%, transparent);
	--brand-border: var(--cza-border-2);
	--brand-text: var(--cza-text-primary);
	--brand-text-secondary: var(--cza-text-secondary);
	--brand-text-muted: var(--cza-text-muted);
	--brand-primary: var(--cza-gold-primary);
	--brand-primary-strong: var(--cza-gold-secondary);
	--brand-action: var(--cza-gold-secondary);
	--brand-glow: var(--cza-gold-glow);
	--brand-focus: var(--cza-champagne);
	/*
	 * Interaction is a distribution concern.  These aliases intentionally sit
	 * below product semantics (success, warning, sport and team colours): a
	 * Builder step, an active navigation item and an editable pick should all
	 * speak the same distribution language without becoming lifecycle states.
	 */
	--brand-interaction-primary: var(--brand-primary);
	--brand-interaction-strong: var(--brand-primary-strong);
	--brand-interaction-soft: color-mix(in srgb, var(--brand-primary) 13%, transparent);
	--brand-interaction-line: color-mix(in srgb, var(--brand-primary) 34%, transparent);
	--brand-interaction-line-strong: color-mix(in srgb, var(--brand-primary) 54%, transparent);
	--brand-interaction-glow: color-mix(in srgb, var(--brand-action) 22%, transparent);
	--brand-structural-line: var(--cza-border-2);
	--brand-structural-line-subtle: var(--cza-divider);
	--brand-opportunity: var(--cza-success);
	--brand-reward: var(--brand-primary);
	--brand-title-gradient: linear-gradient(135deg, var(--cza-champagne) 0%, var(--cza-gold-primary) 48%, var(--cza-gold-secondary) 78%, var(--cza-champagne) 100%);
	--corp-font-sans: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--corp-font-display: "Space Grotesk", "Manrope", system-ui, sans-serif;
	--corp-bg: var(--brand-page);
	--corp-bg-2: var(--brand-page-soft);
	--corp-surface: var(--brand-surface);
	--corp-border: var(--cza-border-1);
	--corp-text: var(--brand-text);
	--corp-text-2: var(--brand-text-secondary);
	--corp-muted: var(--brand-text-muted);
	--corp-gold: var(--brand-primary);
	--corp-action: var(--brand-action);
	--corp-live: var(--brand-interaction-primary);
	--corp-panel: var(--brand-surface-elevated);
	--corp-panel-strong: var(--brand-surface-strong);
	--corp-panel-soft: color-mix(in srgb, var(--cza-bg-primary) 78%, transparent);
	--corp-line: var(--cza-divider);
	--corp-line-strong: var(--brand-border);
	--material-graphite-950: var(--cza-bg-primary);
	--material-graphite-900: var(--cza-bg-secondary);
	--material-graphite-850: var(--cza-bg-tertiary);
	--material-graphite-800: var(--cza-surface-1);
	--material-graphite-700: var(--cza-surface-2);
	--material-warm-gold: var(--cza-gold-secondary);
	--material-warm-gold-soft: color-mix(in srgb, var(--cza-gold-secondary) 15%, transparent);
	--material-graphite-surface:
		linear-gradient(180deg, color-mix(in srgb, var(--cza-champagne) 3.5%, transparent), transparent 44%),
		linear-gradient(145deg, var(--cza-surface-1), var(--cza-bg-primary));
	--material-graphite-panel:
		linear-gradient(180deg, color-mix(in srgb, var(--cza-champagne) 5.5%, transparent), transparent 32%),
		linear-gradient(145deg, var(--cza-surface-2), var(--cza-bg-primary));
	--ds-bg: var(--brand-page);
	--ds-bg-soft: var(--brand-page-soft);
	--ds-surface: var(--brand-surface);
	--ds-surface-elevated: var(--brand-surface-elevated);
	--ds-surface-strong: var(--brand-surface-strong);
	--ds-surface-soft: var(--corp-panel-soft);
	--ds-border: var(--corp-border);
	--ds-border-subtle: var(--corp-line);
	--ds-border-strong: var(--brand-border);
	--ds-text-primary: var(--brand-text);
	--ds-text-secondary: var(--brand-text-secondary);
	--ds-text-muted: var(--brand-text-muted);
	--ds-text-inverse: var(--brand-page);
	--ds-text-inverse-soft: var(--cza-text-invert);
	--ds-primary: var(--brand-primary);
	--ds-primary-strong: var(--brand-primary-strong);
	--ds-accent: var(--brand-interaction-primary);
	--ds-gradient-page: linear-gradient(180deg, var(--brand-page) 0%, var(--brand-page-soft) 100%);
	--ds-gradient-primary: linear-gradient(135deg, var(--cza-champagne) 0%, var(--cza-gold-primary) 48%, var(--cza-champagne) 100%);
	--ds-gradient-dark: linear-gradient(135deg, var(--brand-page) 0%, var(--brand-surface) 100%);
	--ds-gradient-hero:
		radial-gradient(circle at 12% -8%, color-mix(in srgb, var(--brand-primary) 8%, transparent), transparent 28%),
		radial-gradient(circle at 88% 4%, color-mix(in srgb, var(--cza-champagne) 7.5%, transparent), transparent 30%),
		linear-gradient(180deg, color-mix(in srgb, var(--cza-bg-primary) 98%, transparent) 0%, color-mix(in srgb, var(--cza-bg-secondary) 98%, transparent) 100%),
		var(--brand-page);
	--ds-shadow-card: var(--cza-shadow-1);
	--ds-shadow-soft: var(--cza-shadow-2);
	--ds-shadow-glow: var(--cza-glow-soft);
	--ds-shadow-panel: var(--cza-shadow-1), inset 0 1px 0 var(--cza-border-1);
	--color-bg: var(--ds-bg);
	--color-surface: var(--ds-surface);
	--color-surface-soft: var(--ds-bg-soft);
	--color-text: var(--ds-text-primary);
	--color-text-muted: var(--ds-text-muted);
	--color-border: var(--ds-border);
	--color-primary: var(--ds-primary);
	--color-primary-dark: var(--ds-primary-strong);
	--color-cyan: var(--ds-accent);
	--gradient-page: var(--ds-gradient-page);
	--gradient-primary: var(--ds-gradient-primary);
	--gradient-dark: var(--ds-gradient-dark);
	--shadow-card: var(--ds-shadow-card);
	--shadow-soft: var(--ds-shadow-soft);
	--shadow-glow: var(--ds-shadow-glow);
	--shadow-corporate-panel: var(--ds-shadow-panel);

	/* Existing product-family contracts consume semantic aliases.  Their
	 * defaults remain in their own stylesheets for Tobeat; this root mapping is
	 * the CasAzar implementation, not a page-specific colour patch. */
	--arena-cyan: var(--brand-interaction-primary);
	--arena-cyan-soft: var(--brand-interaction-soft);
	--arena-cyan-line: var(--brand-interaction-line);
	--arena-shadow: 0 30px 100px rgba(0, 0, 0, 0.34), 0 0 54px var(--brand-interaction-soft);

	--brand-border-subtle: var(--brand-structural-line);
	--brand-border-strong: var(--brand-interaction-line-strong);
	--brand-card-highlight: var(--brand-interaction-primary);
	--brand-accent-primary: var(--brand-interaction-primary);
	--brand-accent-secondary: var(--brand-primary-strong);
	--brand-state-hover: var(--brand-interaction-soft);
	--brand-state-selected: var(--brand-interaction-primary);
	--brand-state-selected-glow: var(--brand-interaction-glow);

	--arena-builder-ink: var(--brand-text);
	--arena-builder-muted: var(--brand-text-muted);
	--arena-builder-panel: color-mix(in srgb, var(--brand-surface) 84%, transparent);
	--arena-builder-panel-deep: color-mix(in srgb, var(--brand-page) 92%, transparent);
	--arena-builder-line: var(--brand-structural-line);
	--arena-builder-line-strong: var(--brand-interaction-line-strong);
	--arena-builder-accent: var(--brand-interaction-primary);
	--arena-builder-accent-soft: var(--brand-interaction-soft);
	--arena-builder-accent-line: var(--brand-interaction-line);
	--arena-builder-accent-strong: var(--brand-interaction-line-strong);
	--arena-builder-accent-glow: var(--brand-interaction-glow);
	--arena-builder-accent-surface: color-mix(in srgb, var(--brand-primary) 12%, var(--brand-page));
	--arena-builder-accent-gradient: linear-gradient(145deg, var(--cza-champagne), var(--brand-action));
	--arena-builder-focus-border: var(--brand-interaction-line-strong);
	--arena-builder-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 12%, transparent);
	--arena-builder-focus-icon: var(--brand-primary);
	--arena-builder-hover-text: var(--brand-text);
	--arena-builder-step-text: var(--brand-text-muted);
	--arena-builder-step-active-text: var(--brand-page);
	--arena-builder-step-complete: var(--cza-success);
	--arena-builder-good: var(--cza-success);

	--sports-catalog-line: var(--brand-structural-line);
	--sports-catalog-line-strong: var(--brand-interaction-line-strong);
	--sports-catalog-accent: var(--brand-interaction-primary);
}

html[data-distribution="casazar"] body {
	background: var(--ds-gradient-page);
	font-family: var(--corp-font-sans);
}

/* The shared product shell paints its own atmospheric layer.  Replace that
 * material at the shell boundary, rather than trying to recolour page cards. */
html[data-distribution="casazar"] body::before {
	background:
		radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--brand-primary) 42%, transparent) 0 1px, transparent 2px),
		radial-gradient(circle at 74% 12%, rgba(255, 255, 255, 0.32) 0 1px, transparent 2px),
		radial-gradient(circle at 86% 62%, color-mix(in srgb, var(--brand-action) 36%, transparent) 0 1px, transparent 2px),
		linear-gradient(116deg, transparent 0 16%, color-mix(in srgb, var(--brand-primary) 10%, transparent) 16.2%, transparent 33% 100%),
		linear-gradient(28deg, transparent 0 58%, color-mix(in srgb, var(--brand-primary-strong) 8%, transparent) 58.2%, transparent 75% 100%);
}

html[data-distribution="casazar"] .text-cyan {
	color: var(--brand-interaction-primary);
	text-shadow: 0 0 30px var(--brand-interaction-glow);
}

html[data-distribution="casazar"] :focus-visible {
	outline-color: var(--brand-focus);
}

html[data-distribution="casazar"] .brand-orb--distribution-mark {
	width: clamp(112px, 12vw, 156px);
	height: 42px;
	padding: 0 4px;
	border-color: transparent;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

html[data-distribution="casazar"] .brand-orb--distribution-mark img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

html[data-distribution="casazar"] .app-navbar {
	background: color-mix(in srgb, var(--cza-bg-primary) 90%, transparent);
	border-bottom-color: color-mix(in srgb, var(--cza-champagne) 12%, transparent);
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

html[data-distribution="casazar"] .app-navbar .nav-link,
html[data-distribution="casazar"] .app-navbar .profile-switcher,
html[data-distribution="casazar"] .app-navbar .user-pill {
	color: var(--ds-text-secondary);
}

html[data-distribution="casazar"] .app-navbar .nav-link:hover,
html[data-distribution="casazar"] .app-navbar .nav-link:focus-visible,
html[data-distribution="casazar"] .app-navbar .profile-switcher:hover,
html[data-distribution="casazar"] .app-navbar .profile-switcher:focus-visible {
	color: var(--ds-text-primary);
	background: color-mix(in srgb, var(--cza-champagne) 5.5%, transparent);
}

html[data-distribution="casazar"] .app-navbar .nav-link.active,
html[data-distribution="casazar"] .app-navbar .profile-switcher.active,
html[data-distribution="casazar"] .app-navbar .profile-switcher[aria-expanded="true"] {
	/* Corporate shell styling carries a cyan active material with !important.
	 * The active destination is a brand state, so CasAzar owns the entire
	 * treatment: graphite surface, champagne text, restrained gold edge. */
	border-color: var(--cza-border-2) !important;
	background:
		linear-gradient(145deg, color-mix(in srgb, var(--cza-gold-primary) 12%, var(--cza-surface-2)), var(--cza-surface-2)) !important;
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--cza-champagne) 13%, transparent),
		0 0 0 1px color-mix(in srgb, var(--cza-gold-primary) 20%, transparent),
		0 8px 20px rgba(0, 0, 0, 0.2) !important;
	color: var(--cza-champagne) !important;
}

html[data-distribution="casazar"] .app-navbar .nav-link.active::after,
html[data-distribution="casazar"] .app-navbar .profile-switcher.active::after {
	background: linear-gradient(90deg, transparent, var(--cza-gold-primary), transparent) !important;
	box-shadow: 0 0 12px color-mix(in srgb, var(--cza-gold-primary) 34%, transparent) !important;
}

html[data-distribution="casazar"] .btn-primary-gradient {
	border-color: rgba(255, 241, 198, 0.58);
	background: var(--brand-title-gradient);
	color: var(--cza-text-invert);
	box-shadow: var(--cza-glow-soft);
}

html[data-distribution="casazar"] .btn-primary-gradient:hover,
html[data-distribution="casazar"] .btn-primary-gradient:focus-visible {
	box-shadow: var(--cza-glow-strong);
}

/* Login is the first contained proof of the material system. Its markup is
 * distribution-driven; this is a reusable auth surface, not a CasAzar page. */
html[data-distribution="casazar"].corporate-surface:not([data-theme="light-premium"]) .corporate-auth-page--b2b {
	background:
		radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--cza-champagne) 5.5%, transparent), transparent 34%),
		linear-gradient(180deg, color-mix(in srgb, var(--cza-bg-primary) 99%, transparent), color-mix(in srgb, var(--cza-bg-secondary) 98%, transparent)),
		var(--ds-bg);
}

html[data-distribution="casazar"].corporate-surface:not([data-theme="light-premium"]) .corporate-auth-page--b2b::before {
	background: none;
}

html[data-distribution="casazar"].corporate-surface:not([data-theme="light-premium"]) .corporate-auth-page--b2b .corporate-auth-card {
	width: min(100%, 440px);
	padding: clamp(1.1rem, 2.4vw, 1.55rem);
	border-color: var(--cza-border-2);
	border-radius: 26px;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--cza-champagne) 5.5%, transparent), transparent 32%),
		linear-gradient(145deg, color-mix(in srgb, var(--cza-surface-2) 95%, transparent), color-mix(in srgb, var(--cza-bg-primary) 93%, transparent));
	box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 color-mix(in srgb, var(--cza-text-primary) 6%, transparent);
	backdrop-filter: none;
}

html[data-distribution="casazar"].corporate-surface:not([data-theme="light-premium"]) .corporate-auth-page--b2b .corporate-auth-card__halo {
	background: radial-gradient(circle, color-mix(in srgb, var(--cza-champagne) 8%, transparent), transparent 68%);
}

html[data-distribution="casazar"] .corporate-auth-logo--distribution-wordmark {
	display: flex;
	justify-content: center;
	width: min(210px, 72%);
	margin-inline: auto;
	margin-bottom: 1.15rem;
}

html[data-distribution="casazar"] .corporate-auth-logo--distribution-wordmark img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 86px;
	object-fit: contain;
}

/* The base corporate rules pre-date the distribution system and carry direct
 * cyan values. Keep the override at the same shell boundary so Login consumes
 * the semantic CasAzar tokens rather than competing specificity patches. */
html[data-distribution="casazar"].corporate-surface:not([data-theme="light-premium"]) .corporate-auth-page--b2b .corporate-auth-eyebrow {
	color: var(--cza-gold-secondary);
	text-shadow: none;
}

html[data-distribution="casazar"].corporate-surface:not([data-theme="light-premium"]) .corporate-auth-page--b2b .corporate-auth-title {
	font-family: var(--corp-font-sans);
	font-size: clamp(1.55rem, 2.7vw, 1.95rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.04;
	color: var(--cza-text-primary);
}

html[data-distribution="casazar"].corporate-surface:not([data-theme="light-premium"]) .corporate-auth-page--b2b .corporate-auth-subtitle {
	color: var(--ds-text-muted);
	font-size: 0.9rem;
	line-height: 1.4;
}

html[data-distribution="casazar"].corporate-surface:not([data-theme="light-premium"]) .corporate-auth-page--b2b .corporate-auth-input.form-control-premium {
	min-height: 46px;
	border-color: var(--cza-border-2);
	border-radius: 16px;
	background: color-mix(in srgb, var(--cza-bg-primary) 72%, transparent);
	color: var(--cza-text-primary);
}

html[data-distribution="casazar"].corporate-surface:not([data-theme="light-premium"]) .corporate-auth-page--b2b .corporate-auth-input.form-control-premium:focus {
	border-color: color-mix(in srgb, var(--cza-gold-secondary) 42%, transparent);
	box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--cza-gold-secondary) 10%, transparent);
}

html[data-distribution="casazar"].corporate-surface:not([data-theme="light-premium"]) .corporate-auth-page--b2b .corporate-auth-password-toggle {
	border-color: var(--cza-border-2);
	background: color-mix(in srgb, var(--cza-bg-primary) 82%, transparent);
	color: var(--cza-text-secondary);
}

html[data-distribution="casazar"].corporate-surface:not([data-theme="light-premium"]) .corporate-auth-page--b2b .corporate-auth-meta-row a,
html[data-distribution="casazar"].corporate-surface:not([data-theme="light-premium"]) .corporate-auth-page--b2b .corporate-auth-access a {
	color: var(--cza-champagne);
}

html[data-distribution="casazar"].corporate-surface:not([data-theme="light-premium"]) .corporate-auth-page--b2b .corporate-auth-meta-row a:hover,
html[data-distribution="casazar"].corporate-surface:not([data-theme="light-premium"]) .corporate-auth-page--b2b .corporate-auth-access a:hover {
	color: var(--cza-gold-primary);
}

html[data-distribution="casazar"].corporate-surface:not([data-theme="light-premium"]) .corporate-auth-page--b2b .corporate-auth-button {
	min-height: 46px;
	border: 1px solid color-mix(in srgb, var(--cza-champagne) 58%, transparent);
	background: var(--ds-gradient-primary);
	color: var(--cza-text-invert);
	box-shadow: var(--cza-glow-soft);
}

html[data-distribution="casazar"].corporate-surface:not([data-theme="light-premium"]) .corporate-auth-page--b2b .corporate-auth-button:hover,
html[data-distribution="casazar"].corporate-surface:not([data-theme="light-premium"]) .corporate-auth-page--b2b .corporate-auth-button:focus-visible {
	border-color: var(--cza-champagne);
	background: linear-gradient(135deg, var(--cza-champagne), var(--cza-gold-primary) 48%, var(--cza-gold-secondary));
	box-shadow: var(--cza-glow-strong);
}

html[data-distribution="casazar"].corporate-surface:not([data-theme="light-premium"]) .corporate-auth-page--b2b .corporate-auth-google {
	min-height: 46px;
	border-color: color-mix(in srgb, var(--cza-champagne) 14%, transparent);
	background: color-mix(in srgb, var(--cza-text-primary) 2.8%, transparent);
	box-shadow: none;
	color: var(--cza-text-primary);
}

html[data-distribution="casazar"].corporate-surface:not([data-theme="light-premium"]) .corporate-auth-page--b2b .corporate-auth-google:hover,
html[data-distribution="casazar"].corporate-surface:not([data-theme="light-premium"]) .corporate-auth-page--b2b .corporate-auth-google:focus-visible {
	border-color: color-mix(in srgb, var(--cza-gold-primary) 40%, transparent);
	background: color-mix(in srgb, var(--cza-gold-primary) 7%, var(--cza-surface-1));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cza-gold-primary) 10%, transparent);
	color: var(--cza-text-primary);
}

html[data-distribution="casazar"] .corporate-auth-divider::before,
html[data-distribution="casazar"] .corporate-auth-divider::after {
	background: linear-gradient(90deg, transparent, rgba(156, 163, 175, 0.2), transparent);
}

html[data-distribution="casazar"] .app-splash {
	background:
		radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--cza-gold-secondary) 16%, transparent), transparent 30%),
		radial-gradient(circle at 50% 66%, color-mix(in srgb, var(--cza-champagne) 8%, transparent), transparent 38%),
		var(--cza-bg-primary);
}

html[data-distribution="casazar"] .app-splash::before {
	/* The loading surface is part of the global CasAzar shell, not the Arena
	 * field.  Do not reveal the Tobeat grid behind the brand mark. */
	display: none;
}

html[data-distribution="casazar"] .app-splash-wordmark {
	filter: drop-shadow(0 18px 42px color-mix(in srgb, var(--cza-gold-secondary) 20%, transparent)) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.52));
}

/* The first-visit surface belongs to the shared product, but its material and
 * journey are distribution-owned. CasAzar deliberately removes the Tobeat
 * grid, cyan/green signals and field treatment in favour of warm graphite,
 * champagne and a restrained agave detail. */
html[data-distribution="casazar"] .premium-v2-welcome {
	background:
		radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--cza-gold-primary) 12%, transparent), transparent 28%),
		radial-gradient(circle at 86% 80%, color-mix(in srgb, var(--cza-gold-secondary) 9%, transparent), transparent 33%),
		linear-gradient(145deg, rgba(8, 12, 14, 0.985), rgba(18, 19, 22, 0.975));
	color: var(--cza-text-primary);
}

html[data-distribution="casazar"] .premium-v2-welcome__stage::before {
	background:
		radial-gradient(circle at 75% 24%, color-mix(in srgb, var(--cza-gold-primary) 14%, transparent), transparent 24%),
		url('/brands/casazar/materials/casazar-agave-mark.png') right -6rem bottom -8rem / min(52vw, 620px) auto no-repeat;
	mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
	opacity: 0.26;
}

html[data-distribution="casazar"] .premium-v2-welcome__stage::after {
	background:
		linear-gradient(90deg, transparent, color-mix(in srgb, var(--cza-gold-primary) 19%, transparent), transparent),
		linear-gradient(180deg, color-mix(in srgb, var(--cza-champagne) 7%, transparent), transparent 42%, rgba(0, 0, 0, 0.25));
	mix-blend-mode: normal;
	opacity: 0.56;
}

html[data-distribution="casazar"] .premium-v2-welcome__field,
html[data-distribution="casazar"] .premium-v2-welcome__visual-grid {
	display: none;
}

html[data-distribution="casazar"] .premium-v2-welcome__signal {
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cza-gold-primary) 68%, transparent), color-mix(in srgb, var(--cza-champagne) 46%, transparent), transparent);
	filter: drop-shadow(0 0 18px color-mix(in srgb, var(--cza-gold-primary) 28%, transparent));
	opacity: 0.52;
}

html[data-distribution="casazar"] .premium-v2-welcome__panel {
	border-color: var(--cza-border-2);
	background:
		radial-gradient(circle at 87% 16%, color-mix(in srgb, var(--cza-gold-primary) 13%, transparent), transparent 26%),
		linear-gradient(145deg, color-mix(in srgb, var(--cza-surface-2) 98%, transparent), color-mix(in srgb, var(--cza-bg-primary) 98%, transparent));
	box-shadow: 0 42px 130px rgba(0, 0, 0, 0.7), inset 0 1px 0 color-mix(in srgb, var(--cza-champagne) 13%, transparent);
}

html[data-distribution="casazar"] .premium-v2-welcome__panel::before {
	background:
		radial-gradient(circle at 78% 26%, color-mix(in srgb, var(--cza-champagne) 10%, transparent), transparent 25%),
		linear-gradient(90deg, transparent 0 56%, color-mix(in srgb, var(--cza-gold-primary) 16%, transparent) 56% 56.15%, transparent 56.15%);
	opacity: 0.72;
}

html[data-distribution="casazar"] .premium-v2-welcome__visual {
	border-left-color: var(--cza-border-2);
	background:
		radial-gradient(circle at 52% 52%, color-mix(in srgb, var(--cza-gold-primary) 13%, transparent), transparent 28%),
		linear-gradient(145deg, color-mix(in srgb, var(--cza-surface-3) 82%, transparent), color-mix(in srgb, var(--cza-bg-primary) 94%, transparent));
}

html[data-distribution="casazar"] .premium-v2-welcome__visual::before,
html[data-distribution="casazar"] .premium-v2-welcome__visual::after {
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cza-gold-primary) 48%, transparent), transparent);
}

html[data-distribution="casazar"] .premium-v2-welcome__orbit {
	border-color: var(--cza-border-2);
	box-shadow: inset 0 0 44px color-mix(in srgb, var(--cza-gold-primary) 5%, transparent), 0 0 38px color-mix(in srgb, var(--cza-gold-primary) 9%, transparent);
}

html[data-distribution="casazar"] .premium-v2-welcome__orbit--outer {
	border-color: color-mix(in srgb, var(--cza-gold-primary) 34%, transparent);
}

html[data-distribution="casazar"] .premium-v2-welcome__visual-core {
	border-color: color-mix(in srgb, var(--cza-champagne) 62%, transparent);
	background: radial-gradient(circle at 35% 26%, var(--cza-champagne), var(--cza-gold-secondary) 43%, var(--cza-surface-2) 78%);
	color: var(--cza-text-invert);
	box-shadow: 0 0 0 13px color-mix(in srgb, var(--cza-gold-primary) 7%, transparent), var(--cza-glow-strong);
}

html[data-distribution="casazar"] .premium-v2-welcome__visual-node {
	border-color: var(--cza-border-2);
	background: color-mix(in srgb, var(--cza-bg-primary) 88%, transparent);
	color: var(--cza-champagne);
}

html[data-distribution="casazar"] .premium-v2-welcome__visual-node i,
html[data-distribution="casazar"] .premium-v2-welcome__eyebrow {
	color: var(--cza-gold-primary);
}

html[data-distribution="casazar"] .premium-v2-welcome__close {
	border-color: var(--cza-border-2);
	background: color-mix(in srgb, var(--cza-bg-primary) 86%, transparent);
	color: var(--cza-champagne);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cza-champagne) 10%, transparent);
}

html[data-distribution="casazar"] .premium-v2-welcome__logo--wordmark {
	width: min(228px, 62%);
	height: auto;
	margin-bottom: clamp(1.5rem, 3vw, 2.55rem);
	filter: drop-shadow(0 16px 34px color-mix(in srgb, var(--cza-gold-secondary) 16%, transparent)) drop-shadow(0 18px 32px rgba(0, 0, 0, 0.56));
}

html[data-distribution="casazar"] .premium-v2-welcome__title {
	color: var(--cza-text-primary);
	font-family: var(--corp-font-display);
	text-shadow: 0 22px 62px rgba(0, 0, 0, 0.58);
}

html[data-distribution="casazar"] .premium-v2-welcome__title span {
	color: var(--cza-gold-primary);
	text-shadow: 0 18px 48px color-mix(in srgb, var(--cza-gold-primary) 18%, transparent);
}

html[data-distribution="casazar"] .premium-v2-welcome__copy {
	color: var(--cza-text-secondary);
}

html[data-distribution="casazar"] .premium-v2-welcome__primary {
	border-color: color-mix(in srgb, var(--cza-champagne) 68%, transparent);
	background: linear-gradient(135deg, var(--cza-champagne), var(--cza-gold-primary) 54%, var(--cza-gold-secondary));
	color: var(--cza-text-invert);
	box-shadow: var(--cza-glow-soft), inset 0 1px 0 color-mix(in srgb, white 58%, transparent);
}

html[data-distribution="casazar"] .premium-v2-welcome__secondary,
html[data-distribution="casazar"] .premium-v2-welcome__secondary:hover,
html[data-distribution="casazar"] .premium-v2-welcome__secondary:focus-visible {
	color: var(--cza-champagne);
}

@media (max-width: 767.98px) {
	html[data-distribution="casazar"] .premium-v2-welcome__visual {
		border-top-color: var(--cza-border-2);
		border-left: 0;
	}

	html[data-distribution="casazar"] .premium-v2-welcome__logo--wordmark {
		width: min(194px, 64%);
	}
}

@media (max-width: 575.98px) {
	html[data-distribution="casazar"] .corporate-auth-logo--distribution-wordmark {
		width: min(184px, 68%);
		margin-bottom: 0.9rem;
	}
}

/*
 * Distribution-wide component contract
 *
 * These are intentionally shared primitives, loaded after optional page
 * styles.  They remove legacy Tobeat materials at the component boundary
 * without adding brand checks to product templates or changing semantic sport
 * and outcome colours.
 */
html[data-distribution="casazar"] {
	--bs-primary: var(--cza-gold-primary);
	--bs-primary-rgb: 245, 208, 138;
	--bs-link-color: var(--cza-gold-primary);
	--bs-link-hover-color: var(--cza-champagne);
	--bs-focus-ring-color: color-mix(in srgb, var(--cza-gold-primary) 28%, transparent);
	--arena-color-context: var(--cza-surface-2);
	--arena-color-focus: var(--cza-champagne);
	--arena-color-action: var(--cza-gold-primary);
	--arena-color-prestige: var(--cza-gold-secondary);
	--arena-color-opportunity: var(--cza-success);
	--arena-color-pressure: var(--cza-error);
	--brand-surface-page: var(--cza-bg-primary);
	--brand-surface-card: var(--cza-surface-1);
	--brand-surface-elevated: var(--cza-surface-2);
	--brand-participant-a-start: var(--cza-surface-2);
	--brand-participant-a-end: var(--cza-bg-secondary);
	--brand-participant-b-start: var(--cza-surface-3);
	--brand-participant-b-end: var(--cza-bg-secondary);
	--brand-participant-neutral-start: var(--cza-surface-2);
	--brand-participant-neutral-end: var(--cza-bg-primary);
	--brand-border-subtle: var(--cza-border-1);
	--brand-border-strong: var(--cza-border-2);
	--brand-card-highlight: var(--cza-gold-primary);
	--brand-accent-primary: var(--cza-gold-primary);
	--brand-accent-secondary: var(--cza-gold-secondary);
	--brand-accent-premium: var(--cza-champagne);
	--brand-text-primary: var(--cza-text-primary);
	--brand-text-secondary: var(--cza-text-secondary);
	--brand-text-muted: var(--cza-text-muted);
	--brand-state-hover: color-mix(in srgb, var(--cza-gold-primary) 9%, transparent);
	--brand-state-selected: var(--cza-gold-primary);
	--brand-state-selected-glow: var(--cza-gold-glow);
	--brand-state-locked: var(--cza-text-muted);
	--brand-state-success: var(--cza-success);
	--brand-state-error: var(--cza-error);
	--surface-material-base: var(--cza-surface-2);
	--surface-material-elevated: var(--cza-surface-1);
	--surface-material-highlight: var(--cza-champagne);
	--surface-material-reflection: var(--cza-gold-secondary);
	--surface-material-border: var(--cza-border-1);
	--surface-material-selected-border: var(--cza-border-2);
	--surface-material-selected-glow: var(--cza-gold-glow);
	--surface-material-cta-accent: var(--cza-gold-primary);
	--shadow-corporate-panel: var(--cza-shadow-1);
	accent-color: var(--cza-gold-primary);
}

html[data-distribution="casazar"] :is(.corporate-panel, .glass-card, .dropdown-menu, .modal-content, .toast, .pwa-install-modal__content, .offcanvas, .list-group-item) {
	border-color: var(--cza-border-1);
	background-color: var(--cza-surface-1);
	background-image: linear-gradient(145deg, color-mix(in srgb, var(--cza-champagne) 3%, transparent), transparent 34%);
	box-shadow: var(--cza-shadow-2);
	color: var(--cza-text-primary);
}

html[data-distribution="casazar"] :is(.modal-header, .modal-footer, .dropdown-divider, hr, .list-group-item + .list-group-item) {
	border-color: var(--cza-divider);
}

html[data-distribution="casazar"] :is(.form-control, .form-select, .form-control-premium, .input-group-text, .search-field input, textarea, select) {
	border-color: var(--cza-border-1);
	background-color: var(--cza-bg-secondary);
	color: var(--cza-text-primary);
	box-shadow: inset 0 1px 0 color-mix(in srgb, white 3%, transparent);
}

html[data-distribution="casazar"] :is(.form-control, .form-select, .form-control-premium, .search-field input, textarea, select)::placeholder {
	color: var(--cza-text-muted);
	opacity: 1;
}

html[data-distribution="casazar"] :is(.form-control, .form-select, .form-control-premium, .search-field input, textarea, select):is(:focus, :focus-visible) {
	border-color: var(--cza-gold-secondary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cza-gold-primary) 14%, transparent);
}

html[data-distribution="casazar"] :is(.btn-primary-gradient, .btn-primary, .btn.btn-primary) {
	border-color: color-mix(in srgb, var(--cza-champagne) 64%, transparent);
	background: linear-gradient(135deg, var(--cza-champagne), var(--cza-gold-primary) 52%, var(--cza-gold-secondary));
	box-shadow: var(--cza-glow-soft);
	color: var(--cza-text-invert);
}

html[data-distribution="casazar"] :is(.btn-primary-gradient, .btn-primary, .btn.btn-primary):is(:hover, :focus, :focus-visible) {
	border-color: var(--cza-champagne);
	background: linear-gradient(135deg, var(--cza-champagne), var(--cza-gold-primary) 48%, var(--cza-gold-secondary));
	box-shadow: var(--cza-glow-strong);
	color: var(--cza-text-invert);
}

html[data-distribution="casazar"] :is(.btn-outline-primary, .btn-secondary, .btn-outline-secondary) {
	border-color: var(--cza-border-2);
	background: color-mix(in srgb, var(--cza-surface-2) 90%, transparent);
	color: var(--cza-champagne);
}

html[data-distribution="casazar"] :is(.btn-outline-primary, .btn-secondary, .btn-outline-secondary):is(:hover, :focus, :focus-visible) {
	border-color: var(--cza-gold-primary);
	background: color-mix(in srgb, var(--cza-gold-primary) 10%, var(--cza-surface-2));
	color: var(--cza-champagne);
}

html[data-distribution="casazar"] :is(.corporate-section-eyebrow, .eyebrow, .text-cyan, .text-primary) {
	color: var(--cza-gold-primary) !important;
	text-shadow: none;
}

html[data-distribution="casazar"] :is(.nav-link.active, .app-navbar .nav-link:is(:hover, :focus-visible), .dropdown-item:is(:hover, :focus-visible, .active)) {
	background-color: color-mix(in srgb, var(--cza-gold-primary) 9%, transparent);
	color: var(--cza-champagne);
}

html[data-distribution="casazar"] :is(.badge, .badge-premium, .badge-muted, .chip, .pill):not(.is-success, .is-error, .is-warning, .is-danger, .is-live, .is-active, .status-success, .status-error) {
	border-color: var(--cza-border-2);
	background-color: color-mix(in srgb, var(--cza-surface-2) 88%, transparent);
	color: var(--cza-champagne);
}

html[data-distribution="casazar"] :is(.alert-info, .text-info, .bg-info) {
	border-color: color-mix(in srgb, var(--cza-info) 42%, transparent);
	background-color: color-mix(in srgb, var(--cza-info) 12%, var(--cza-surface-1));
	color: var(--cza-champagne) !important;
}

html[data-distribution="casazar"] :is(.alert-success, .text-success) { color: var(--cza-success) !important; }
html[data-distribution="casazar"] :is(.alert-danger, .text-danger) { color: var(--cza-error) !important; }
html[data-distribution="casazar"] :is(.alert-warning, .text-warning) { color: var(--cza-warning) !important; }

/* Home and Manager: presentation tokens only.  Lifecycle chips intentionally
 * keep their green / warning / error meanings. */
html[data-distribution="casazar"] :is(.player-home-page, .arena-manager-page, .my-arenas-library) {
	--home-arena-primary: var(--cza-gold-primary);
	--home-arena-accent: var(--cza-success);
	background-color: var(--cza-bg-primary);
	color: var(--cza-text-primary);
}

html[data-distribution="casazar"] :is(.player-home__hero, .arena-manager-hero, .my-arenas-library) {
	border-color: var(--cza-border-2);
	background:
		radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--cza-gold-primary) 12%, transparent), transparent 34%),
		linear-gradient(145deg, var(--cza-surface-2), var(--cza-bg-secondary));
	box-shadow: var(--cza-shadow-1);
}

html[data-distribution="casazar"] :is(.player-home__eyebrow, .player-home__empty i, .player-home__empty a, .player-home__text-link, .player-home__next small, .player-home__podium b, .player-home__community > i, .player-home__discover > i:first-child, .my-arenas-library__eyebrow, .my-arenas-library__group > header a, .my-arenas-library__back, .my-arenas-library__past > span:last-child, .my-arenas-library__empty > i) {
	color: var(--cza-gold-primary);
}

html[data-distribution="casazar"] :is(.player-home__moment, .player-home__my-arena, .player-home__ranking, .player-home__quick-action, .my-arenas-library__row, .my-arenas-library__past, .player-home__discover) {
	border-color: var(--cza-border-1);
	background: linear-gradient(145deg, var(--cza-surface-1), var(--cza-bg-secondary));
	color: var(--cza-text-primary);
}

html[data-distribution="casazar"] :is(.player-home__moment, .player-home__quick-action, .my-arenas-library__row):is(:hover, :focus-visible) {
	border-color: var(--cza-border-2);
	background: linear-gradient(145deg, color-mix(in srgb, var(--cza-gold-primary) 7%, var(--cza-surface-2)), var(--cza-bg-secondary));
}

html[data-distribution="casazar"] :is(.player-home__count, .player-home__ranking-status) {
	border: 1px solid var(--cza-border-2);
	background: color-mix(in srgb, var(--cza-gold-primary) 10%, var(--cza-surface-2));
	color: var(--cza-champagne);
}

html[data-distribution="casazar"] :is(.player-home__standing > span, .player-home__quick-action > i, .player-home__quick-action em, .player-home__active-arena-state > i, .player-home__active-arena-state em) {
	color: var(--cza-gold-primary);
}

html[data-distribution="casazar"] .player-home__quick-action > i {
	border-color: var(--cza-border-2);
	background: color-mix(in srgb, var(--cza-gold-primary) 8%, var(--cza-surface-2));
}

/* Catalog retains provider/sport information while its product shell adopts
 * the distribution material. */
html[data-distribution="casazar"] .sports-catalog-page {
	--sports-catalog-ink: var(--cza-text-primary);
	--sports-catalog-muted: var(--cza-text-secondary);
	--sports-catalog-dim: var(--cza-text-muted);
	--sports-catalog-panel: color-mix(in srgb, var(--cza-surface-1) 90%, transparent);
	--sports-catalog-panel-raised: color-mix(in srgb, var(--cza-surface-2) 92%, transparent);
	--sports-catalog-line: var(--cza-border-1);
	--sports-catalog-line-strong: var(--cza-border-2);
	--sports-catalog-accent: var(--cza-gold-primary);
	--sports-catalog-good: var(--cza-success);
	--sports-catalog-warn: var(--cza-warning);
	--sports-catalog-bad: var(--cza-error);
	background:
		radial-gradient(ellipse at 86% -8%, color-mix(in srgb, var(--cza-gold-primary) 10%, transparent), transparent 38%),
		linear-gradient(180deg, var(--cza-bg-primary), var(--cza-bg-secondary));
}

html[data-distribution="casazar"] :is(.sports-catalog-selection-summary, .sports-catalog-filter-panel, .sports-catalog-card, .sports-catalog-detail-hero, .sports-catalog-summary-card, .sports-catalog-detail-panel, .sports-catalog-empty) {
	border-color: var(--cza-border-1);
	background:
		radial-gradient(ellipse at 16% 12%, color-mix(in srgb, var(--cza-gold-primary) 7%, transparent), transparent 36%),
		linear-gradient(145deg, var(--cza-surface-2), var(--cza-bg-secondary));
	box-shadow: var(--cza-shadow-2);
}

html[data-distribution="casazar"] .sports-catalog-selection-summary__mark {
	border-color: var(--cza-border-2);
	background: color-mix(in srgb, var(--cza-gold-primary) 9%, var(--cza-surface-2));
	color: var(--cza-gold-primary);
}

/* Operations is an operational product surface: amber remains warning, green
 * remains resolved/healthy; all neutral brand affordances are gold. */
html[data-distribution="casazar"] .arena-operations-page {
	background:
		radial-gradient(circle at 82% 6%, color-mix(in srgb, var(--cza-gold-primary) 9%, transparent), transparent 27rem),
		linear-gradient(180deg, var(--cza-bg-primary), var(--cza-bg-secondary));
}

html[data-distribution="casazar"] :is(.arena-operations-eyebrow, .arena-operations-text-link, .arena-operations-context i, .arena-operations-context a:hover) {
	color: var(--cza-gold-primary);
}

html[data-distribution="casazar"] :is(.arena-operations-hero, .arena-operation-event-hero, .arena-operations-hero__summary, .arena-operation-panel, .arena-operation-side-panel, .arena-operations-event-card, .arena-operations-count) {
	border-color: var(--cza-border-1);
	background:
		radial-gradient(circle at 84% 20%, color-mix(in srgb, var(--cza-gold-primary) 8%, transparent), transparent 24rem),
		linear-gradient(145deg, var(--cza-surface-2), var(--cza-bg-secondary));
	color: var(--cza-text-primary);
	box-shadow: var(--cza-shadow-2);
}

html[data-distribution="casazar"] :is(.arena-operations-context a, .arena-operations-event-card:hover, .arena-operations-section--live .arena-operations-count, .arena-operations-event-card--live) {
	border-color: var(--cza-border-2);
	background: color-mix(in srgb, var(--cza-gold-primary) 8%, var(--cza-surface-2));
	color: var(--cza-champagne);
}

/* Builder, Community, Play and Match surfaces retain their existing markup
 * and sport semantics.  Only their neutral product material is resolved here.
 * The explicit list keeps this layer auditable and avoids a universal filter. */
html[data-distribution="casazar"] :is(
	.arena-builder-page,
	.leagues-page,
	.league-home,
	.matches-page,
	.play-page,
	.ranking-page,
	.community-page,
	.profile-page,
	.settings-page
) {
	background: var(--cza-page-background);
	color: var(--cza-text-primary);
}

/* Ranking and Community are product surfaces.  They deliberately share the
 * plain Home ground; the Arena field/grid remains exclusive to Play. */
html[data-distribution="casazar"] :is(body, .app-shell, .community-app-shell) {
	background: var(--cza-page-background);
}

html[data-distribution="casazar"] :is(.ranking-page, .community-page) {
	background: var(--cza-page-background);
}

/* Arena keeps sport facts but uses CasAzar's premium material.  The Hero's
 * sport palette is intentionally routed through separate source variables in
 * the renderer; these are the final distribution-facing visual tokens. */
html[data-distribution="casazar"] .play-page .arena-command-plate {
	--play-hero-bg: var(--cza-bg-primary);
	--play-hero-bg-raised: var(--cza-surface-2);
	--play-hero-accent: var(--cza-gold-primary);
	--play-hero-glow: var(--cza-gold-secondary);
	--play-hero-secondary: var(--cza-gold-muted);
	--play-hero-text: var(--cza-text-primary);
	--play-hero-muted: var(--cza-text-secondary);
	--arena-command-line: var(--cza-border-1);
	--arena-command-line-strong: var(--cza-border-2);
	--arena-command-surface: var(--cza-bg-primary);
	--arena-command-surface-raised: var(--cza-surface-2);
	--arena-command-ink: var(--cza-text-primary);
	--arena-command-muted: var(--cza-text-secondary);
	border-color: var(--cza-border-2);
	background:
		radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--cza-gold-primary) 10%, transparent), transparent 31%),
		linear-gradient(145deg, var(--cza-surface-2), var(--cza-bg-primary)) !important;
	box-shadow: var(--cza-shadow-1) !important;
}

html[data-distribution="casazar"] .play-page .arena-command-plate::before {
	/* The Tobeat field grid is not part of CasAzar's Hero material. */
	display: none;
}

html[data-distribution="casazar"] .play-page .arena-command-plate__story {
	border-top-color: var(--cza-divider);
	background: color-mix(in srgb, var(--cza-text-primary) 1.8%, transparent);
}

html[data-distribution="casazar"] .play-page .arena-command-plate :is(
	.arena-command-plate__signals div,
	.arena-command-plate__action
) {
	border-color: var(--cza-divider);
}

/* Ranking's visual system predates DistributionContext and defines a local
 * palette.  Resolve that palette once here so every metric, card and state
 * consumes CasAzar typography rather than the legacy Tobeat cyan/blue set. */
html[data-distribution="casazar"] .ranking-page {
	--rank-bg: var(--cza-bg-primary);
	--rank-surface: color-mix(in srgb, var(--cza-surface-1) 94%, transparent);
	--rank-surface-strong: color-mix(in srgb, var(--cza-surface-2) 96%, transparent);
	--rank-surface-soft: color-mix(in srgb, var(--cza-surface-1) 78%, transparent);
	--rank-ink: var(--cza-text-primary);
	--rank-muted: var(--cza-text-secondary);
	--rank-line: var(--cza-border-1);
	--rank-blue: var(--cza-gold-muted);
	--rank-cyan: var(--cza-gold-primary);
	--rank-purple: var(--cza-gold-muted);
	--rank-gold: var(--cza-gold-primary);
	--rank-silver: var(--cza-text-secondary);
	--rank-bronze: var(--cza-gold-muted);
	--rank-gradient: linear-gradient(135deg, var(--cza-champagne), var(--cza-gold-secondary));
	--rank-shadow: var(--cza-shadow-1);
	background: var(--cza-page-background);
	color: var(--cza-text-primary);
}

html[data-distribution="casazar"] .ranking-page .ranking-hero {
	border-color: var(--cza-border-2);
	background:
		radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--cza-gold-primary) 9%, transparent), transparent 31%),
		linear-gradient(145deg, var(--cza-surface-2), var(--cza-bg-secondary));
	background-size: auto;
}

html[data-distribution="casazar"] .ranking-page .ranking-hero::before {
	background: radial-gradient(circle at 82% 42%, color-mix(in srgb, var(--cza-champagne) 11%, transparent), transparent 28%);
}

html[data-distribution="casazar"] .ranking-page :is(
	.ranking-insight-value,
	.ranking-insight-card.is-primary .ranking-insight-value,
	.ranking-insight-card.is-position .ranking-insight-value,
	.ranking-position,
	.ranking-position span,
	.ranking-entry-position,
	.ranking-points,
	.ranking-points strong,
	.ranking-entry-points,
	.ranking-gap.is-leader strong,
	.ranking-gap.is-tied strong,
	.ranking-avatar,
	.ranking-search-icon,
	.ranking-board-label
) {
	color: var(--cza-gold-primary);
	-webkit-text-fill-color: currentColor;
}

html[data-distribution="casazar"] .ranking-page :is(
	.ranking-insight-label,
	.ranking-insight-text,
	.ranking-entry-position-label,
	.ranking-entry-points-label,
	.ranking-entry-meta,
	.ranking-points span,
	.ranking-stat span,
	.ranking-gap span,
	.ranking-movement span
) {
	color: var(--cza-text-secondary);
}

html[data-distribution="casazar"] .ranking-page .ranking-search-input::placeholder {
	color: var(--cza-text-secondary);
}

/* The current Ranking route renders the neutral summary cards, rather than
 * the legacy insight-card family above.  Keep this mapping beside the ranking
 * palette so the visible typography cannot fall back to Tobeat cyan/green. */
html[data-distribution="casazar"] .ranking-page :is(
	.ranking-neutral-hero .corporate-section-eyebrow,
	.ranking-board .corporate-section-eyebrow
) {
	color: var(--cza-gold-primary);
}

html[data-distribution="casazar"] .ranking-page :is(
	.ranking-neutral-hero__arena,
	.ranking-neutral-hero__copy > p:not(.corporate-section-eyebrow):not(.ranking-neutral-hero__arena),
	.ranking-summary-card > span,
	.ranking-summary-card > small
) {
	color: var(--cza-text-secondary);
}

html[data-distribution="casazar"] .ranking-page .ranking-summary-card {
	border-color: var(--cza-border-1);
	background: linear-gradient(145deg, var(--cza-surface-1), var(--cza-bg-secondary));
}

html[data-distribution="casazar"] .ranking-page .ranking-summary-card > strong,
html[data-distribution="casazar"] .ranking-page .ranking-summary-card__status {
	color: var(--cza-gold-primary) !important;
	-webkit-text-fill-color: currentColor;
}

/* Community follows the same distribution vocabulary.  These selectors cover
 * the legacy literal cyan declarations without changing product status colours. */
html[data-distribution="casazar"] .community-page :is(
	.community-kicker,
	.community-host i,
	.community-preview-label,
	.community-participant-card__ranking strong,
	.community-invite__code strong,
	.community-avatar
) {
	color: var(--cza-gold-primary);
}

html[data-distribution="casazar"] .community-page :is(
	.community-hero,
	.community-chat,
	.community-rivals,
	.community-organizer,
	.community-invite,
	.community-participant-card,
	.community-message article
) {
	border-color: var(--cza-border-1) !important;
	background: linear-gradient(145deg, var(--cza-surface-1), var(--cza-bg-secondary)) !important;
}

html[data-distribution="casazar"] .community-page :is(
	.community-participant-card.is-current-user,
	.community-invite__code[open] summary
) {
	border-color: var(--cza-border-2) !important;
}

html[data-distribution="casazar"] .community-page .community-avatar {
	border-color: var(--cza-border-2);
	background-color: color-mix(in srgb, var(--cza-gold-primary) 10%, var(--cza-surface-2));
}

/* Community avatars used a complete cyan `background` shorthand.  Override
 * the shorthand (not only background-color) so its material follows CasAzar. */
html[data-distribution="casazar"] .community-page .community-avatar {
	border-color: var(--cza-border-2);
	background: linear-gradient(145deg, var(--cza-champagne), var(--cza-gold-secondary));
	color: var(--cza-text-invert);
}

html[data-distribution="casazar"] .community-page .community-message--organizer .community-avatar {
	border-color: color-mix(in srgb, var(--cza-gold-primary) 48%, transparent);
	background: linear-gradient(145deg, var(--cza-gold-primary), var(--cza-gold-muted));
}

html[data-distribution="casazar"] .community-page :is(a, button, summary):focus-visible {
	outline-color: var(--cza-champagne);
}

html[data-distribution="casazar"] :is(
	.arena-builder-arena-card,
	.arena-builder-empty,
	.arena-wizard-shell,
	.arena-wizard-timeline,
	.arena-wizard-timeline-editor,
	.arena-wizard-discovery-card,
	.arena-wizard-review-card,
	.arena-wizard-setting-group,
	.arena-wizard-manual-dialog__surface,
	.league-card,
	.league-home-card,
	.league-competition-card,
	.league-glory-card,
	.league-members-preview-card,
	.league-side-card,
	.league-settings-card,
	.league-status-card,
	.league-message-admin-card,
	.league-context-menu,
	.matches-control-panel,
	.matches-filter-item,
	.play-competition-panel,
	.play-control-panel,
	.play-empty-state,
	.match-card
) {
	border-color: var(--cza-border-1);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--cza-champagne) 3%, transparent), transparent 34%),
		linear-gradient(145deg, var(--cza-surface-2), var(--cza-bg-secondary));
	box-shadow: var(--cza-shadow-2);
	color: var(--cza-text-primary);
}

/* The wizard shell is the one elevated composition surface.  Its step panel
 * is structural content, not another card: keeping it transparent prevents
 * a nested rectangle and restores the intended breathing room around fields. */
html[data-distribution="casazar"] .arena-wizard-shell {
	border-color: var(--cza-border-1);
	background:
		radial-gradient(circle at 84% 7%, color-mix(in srgb, var(--cza-gold-primary) 8%, transparent), transparent 32%),
		linear-gradient(145deg, var(--cza-surface-2), var(--cza-bg-secondary));
	box-shadow: var(--cza-shadow-2);
}

html[data-distribution="casazar"] .arena-wizard-panel {
	border: 0;
	background: transparent;
	box-shadow: none;
}

html[data-distribution="casazar"] .arena-wizard-steps {
	border-bottom-color: var(--cza-divider);
	background: transparent;
}

html[data-distribution="casazar"] .arena-wizard-step__number {
	border-color: var(--cza-border-1);
	background: var(--cza-bg-primary);
}

html[data-distribution="casazar"] .arena-wizard-step,
html[data-distribution="casazar"] .arena-wizard-step.is-current {
	border: 0;
	background: transparent;
	box-shadow: none;
}

html[data-distribution="casazar"] .arena-wizard-step {
	color: var(--cza-text-muted);
}

html[data-distribution="casazar"] .arena-wizard-step.is-current,
html[data-distribution="casazar"] .arena-wizard-step.is-current .arena-wizard-step__labels {
	color: var(--cza-champagne);
}

html[data-distribution="casazar"] .arena-wizard-step.is-current .arena-wizard-step__number {
	border-color: var(--cza-champagne);
	background: var(--arena-builder-accent-gradient);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--cza-gold-primary) 13%, transparent), var(--cza-glow-soft);
	color: var(--cza-text-invert);
}

html[data-distribution="casazar"] .arena-wizard-date-control__trigger {
	border-color: var(--cza-border-1);
	background: color-mix(in srgb, var(--cza-bg-secondary) 92%, transparent);
}

html[data-distribution="casazar"] :is(.arena-wizard-date-control__divider, .arena-wizard-date-control__value time:last-child, .arena-wizard-date-control__chevron, .arena-wizard-date-context) {
	color: var(--cza-text-secondary);
}

html[data-distribution="casazar"] .arena-wizard-date-control__trigger:is(:focus-visible, :focus-within) {
	border-color: var(--cza-gold-secondary);
	background: color-mix(in srgb, var(--cza-gold-primary) 7%, var(--cza-bg-secondary));
	box-shadow: var(--arena-builder-focus-shadow);
}

html[data-distribution="casazar"] :is(
	.arena-builder__eyebrow,
	.arena-wizard-panel__mark,
	.arena-wizard-step.is-current .arena-wizard-step__number,
	.league-home-eyebrow,
	.league-competition-eyebrow,
	.league-home-kicker,
	.play-arena-hero__eyebrow,
	.play-hero-eyebrow,
	.matches-hero__eyebrow-row,
	.match-card__topline
) {
	color: var(--cza-gold-primary);
}

html[data-distribution="casazar"] :is(
	.arena-builder-arena-card,
	.arena-wizard-panel,
	.arena-wizard-discovery-card,
	.arena-wizard-review-card,
	.league-card,
	.league-home-card,
	.league-competition-card,
	.league-glory-card,
	.league-settings-card,
	.league-status-card,
	.matches-control-panel,
	.play-competition-panel,
	.play-control-panel,
	.match-card
) :is(h1, h2, h3, h4, strong) {
	color: var(--cza-text-primary);
}

html[data-distribution="casazar"] :is(
	.arena-builder-arena-card,
	.arena-wizard-panel,
	.arena-wizard-discovery-card,
	.arena-wizard-review-card,
	.league-card,
	.league-home-card,
	.league-competition-card,
	.league-glory-card,
	.league-settings-card,
	.league-status-card,
	.matches-control-panel,
	.play-competition-panel,
	.play-control-panel,
	.match-card
) :is(p, small, dt, .text-muted) {
	color: var(--cza-text-secondary);
}

html[data-distribution="casazar"] :is(
	.arena-wizard-date-control,
	.arena-wizard-option-row,
	.arena-wizard-radio-card,
	.arena-wizard-timeline-tool,
	.arena-wizard-timeline-source,
	.arena-wizard-timeline-moment,
	.arena-operation-action-card,
	.arena-operations-standard-row,
	.arena-operations-empty,
	.arena-operations-readonly,
	.arena-operation-result-field--ordered,
	.arena-operation-advanced__body form,
	.league-context-menu__item,
	.league-context-menu__action,
	.league-state-metrics > div,
	.league-glory-metrics > div,
	.league-deadline-countdown,
	.league-rival-stack > div,
	.league-activity-list > div,
	.matches-stat,
	.play-hero-metric
) {
	border-color: var(--cza-border-1);
	background-color: color-mix(in srgb, var(--cza-surface-2) 92%, transparent);
	color: var(--cza-text-primary);
}

html[data-distribution="casazar"] :is(
	.arena-wizard-radio-card:is(:hover, :focus-within, .is-selected),
	.arena-wizard-option-row:is(:hover, :focus-within),
	.arena-wizard-timeline-tool:is(:hover, :focus-within),
	.league-card:is(:hover, :focus-within),
	.league-home-card:is(:hover, :focus-within),
	.match-card:is(:hover, :focus-within),
	.matches-stat:is(:hover, :focus-within),
	.play-hero-metric:is(:hover, :focus-within)
) {
	border-color: var(--cza-border-2);
	background-color: color-mix(in srgb, var(--cza-gold-primary) 8%, var(--cza-surface-2));
	box-shadow: var(--cza-glow-soft);
}

html[data-distribution="casazar"] :is(.bottom-nav, .app-navbar .navbar-collapse, .profile-menu, .league-context-menu) {
	border-color: var(--cza-border-1);
	background-color: color-mix(in srgb, var(--cza-bg-primary) 96%, transparent);
	background-image: linear-gradient(180deg, color-mix(in srgb, var(--cza-champagne) 3%, transparent), transparent 42%);
	box-shadow: var(--cza-shadow-1);
}

html[data-distribution="casazar"] :is(.bottom-nav__item, .bottom-nav__icon, .app-navbar .navbar-toggler, .app-navbar .nav-utility-action) {
	color: var(--cza-text-secondary);
}

html[data-distribution="casazar"] :is(.bottom-nav__item, .app-navbar .navbar-toggler, .app-navbar .nav-utility-action):is(.active, .is-active, :hover, :focus-visible) {
	border-color: var(--cza-border-2);
	background-color: color-mix(in srgb, var(--cza-gold-primary) 9%, transparent);
	color: var(--cza-champagne);
}

html[data-distribution="casazar"] :is(.arena-operations-status.is-live, .arena-operations-authority.is-provider, .arena-operations-section--live .arena-operations-count) {
	border-color: var(--cza-border-2);
	background-color: color-mix(in srgb, var(--cza-gold-primary) 10%, var(--cza-surface-2));
	color: var(--cza-champagne);
}

html[data-distribution="casazar"] :is(.arena-operation-action-card.is-primary, .arena-operations-standard-row:hover, .arena-operation-standard-row:focus-visible) {
	border-color: var(--cza-border-2);
	background: linear-gradient(145deg, color-mix(in srgb, var(--cza-gold-primary) 9%, var(--cza-surface-2)), var(--cza-bg-secondary));
}

/* Notifications are a shared product surface.  Corporate styles predate the
 * distribution system and carry their own cool-blue material, so this block
 * deliberately defines the complete CasAzar material contract for both the
 * manager composer and the global bell panel. */
html[data-distribution="casazar"] .league-notifications-page .leagues-hero,
html[data-distribution="casazar"] .league-notifications-page .push-broadcast-card {
	border-color: var(--cza-border-1);
	background:
		radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--cza-gold-primary) 11%, transparent), transparent 32%),
		linear-gradient(145deg, var(--cza-surface-2), var(--cza-bg-secondary));
	box-shadow: var(--cza-shadow-1);
}

html[data-distribution="casazar"] .league-notifications-page .btn-secondary-soft,
html[data-distribution="casazar"] .notification-center-panel .btn-secondary-soft {
	border-color: var(--cza-border-2);
	background: color-mix(in srgb, var(--cza-surface-2) 92%, transparent);
	box-shadow: none;
	color: var(--cza-champagne);
}

html[data-distribution="casazar"] .league-notifications-page .btn-secondary-soft:is(:hover, :focus-visible),
html[data-distribution="casazar"] .notification-center-panel .btn-secondary-soft:is(:hover, :focus-visible) {
	border-color: var(--cza-gold-primary);
	background: color-mix(in srgb, var(--cza-gold-primary) 10%, var(--cza-surface-2));
	box-shadow: var(--cza-glow-soft);
	color: var(--cza-champagne);
}

html[data-distribution="casazar"] .league-notifications-page :is(.push-broadcast-panel, .push-broadcast-preview) {
	border-color: var(--cza-border-1);
	background: color-mix(in srgb, var(--cza-bg-secondary) 88%, transparent);
	box-shadow: inset 0 1px 0 color-mix(in srgb, white 3%, transparent);
	color: var(--cza-text-primary);
}

html[data-distribution="casazar"] .league-notifications-page .push-preview-card__phone {
	border-color: var(--cza-border-2);
	background:
		radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--cza-gold-primary) 12%, transparent), transparent 32%),
		linear-gradient(165deg, var(--cza-surface-3), var(--cza-bg-primary));
	box-shadow: var(--cza-shadow-2);
}

html[data-distribution="casazar"] .league-notifications-page .push-preview-card__eyebrow {
	color: var(--cza-gold-primary);
}

html[data-distribution="casazar"] .league-notifications-page .push-preview-card__phone p,
html[data-distribution="casazar"] .league-notifications-page .push-channel-option small {
	color: var(--cza-text-secondary);
}

html[data-distribution="casazar"] .league-notifications-page .push-channel-option {
	border-color: var(--cza-border-1);
	background: color-mix(in srgb, var(--cza-surface-2) 92%, transparent);
	box-shadow: inset 0 1px 0 color-mix(in srgb, white 3%, transparent);
	color: var(--cza-text-primary);
}

html[data-distribution="casazar"] .league-notifications-page .push-channel-option:is(:hover, :focus-within) {
	border-color: var(--cza-border-2);
	background: color-mix(in srgb, var(--cza-gold-primary) 8%, var(--cza-surface-2));
	box-shadow: var(--cza-glow-soft);
}

html[data-distribution="casazar"] .league-notifications-page .push-channel-option:has(input:checked) {
	border-color: var(--cza-gold-primary);
	background: linear-gradient(145deg, color-mix(in srgb, var(--cza-gold-primary) 14%, var(--cza-surface-2)), var(--cza-bg-secondary));
	box-shadow: var(--cza-glow-soft);
}

html[data-distribution="casazar"] .league-notifications-page .push-channel-option input {
	accent-color: var(--cza-gold-primary);
}

html[data-distribution="casazar"] .league-notifications-page .push-channel-option.is-disabled {
	border-color: var(--cza-border-1);
	background: color-mix(in srgb, var(--cza-bg-secondary) 82%, transparent);
	box-shadow: none;
}

html[data-distribution="casazar"] .league-notifications-page .push-channel-option.is-disabled :is(strong, small) {
	color: var(--cza-text-muted);
}

html[data-distribution="casazar"] .notification-center-panel {
	border-color: var(--cza-border-1);
	background: linear-gradient(155deg, var(--cza-surface-2), var(--cza-bg-primary));
	background-image: linear-gradient(155deg, var(--cza-surface-2), var(--cza-bg-primary));
	box-shadow: var(--cza-shadow-2);
	color: var(--cza-text-primary);
}

html[data-distribution="casazar"] :is(.notification-center-panel__header, .notification-center-panel__push) {
	border-color: var(--cza-divider);
}

html[data-distribution="casazar"] .notification-center-panel :is(.notification-center-panel__eyebrow, .notification-center-panel__toolbar button, .notification-center-item__action, .notification-center-item__actions button, .notification-center-panel__empty i) {
	color: var(--cza-gold-primary);
}

html[data-distribution="casazar"] .notification-center-panel__close {
	background: color-mix(in srgb, var(--cza-surface-3) 90%, transparent);
	color: var(--cza-champagne);
}

html[data-distribution="casazar"] .notification-center-item {
	border-color: var(--cza-border-1);
	background: color-mix(in srgb, var(--cza-bg-secondary) 82%, transparent);
}

html[data-distribution="casazar"] .notification-center-item.is-unread {
	border-color: var(--cza-border-2);
	background: linear-gradient(145deg, color-mix(in srgb, var(--cza-gold-primary) 9%, var(--cza-surface-2)), var(--cza-bg-secondary));
}

html[data-distribution="casazar"] .notification-center-item__icon {
	background: color-mix(in srgb, var(--cza-gold-primary) 14%, var(--cza-surface-2));
	color: var(--cza-champagne);
}

html[data-distribution="casazar"] .notification-center-panel__push {
	background: color-mix(in srgb, var(--cza-surface-2) 82%, transparent);
}

/* Consent is global shell UI, so it follows the active distribution material
 * rather than inheriting the corporate cyan notification treatment. */
html[data-distribution="casazar"] .cookie-consent {
	border-radius: var(--cza-radius-lg);
	border-color: var(--cza-border-2);
	background:
		radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--cza-gold-primary) 13%, transparent), transparent 34%),
		linear-gradient(145deg, var(--cza-surface-2), var(--cza-bg-primary));
	box-shadow: var(--cza-shadow-1), inset 0 1px 0 color-mix(in srgb, var(--cza-champagne) 8%, transparent);
	color: var(--cza-text-primary);
}

html[data-distribution="casazar"] .cookie-consent__orb {
	border-radius: 50%;
	background:
		radial-gradient(circle at 32% 28%, var(--cza-champagne), transparent 24%),
		linear-gradient(145deg, var(--cza-gold-primary), var(--cza-gold-secondary));
	box-shadow: 0 12px 28px color-mix(in srgb, var(--cza-gold-primary) 18%, transparent), inset 0 1px 0 color-mix(in srgb, white 54%, transparent);
}

html[data-distribution="casazar"] .cookie-consent__orb::before {
	background: color-mix(in srgb, var(--cza-bg-primary) 86%, transparent);
	box-shadow:
		12px 5px 0 color-mix(in srgb, var(--cza-bg-primary) 74%, transparent),
		4px 17px 0 color-mix(in srgb, var(--cza-bg-primary) 80%, transparent);
}

html[data-distribution="casazar"] .cookie-consent__orb::after {
	border-color: color-mix(in srgb, var(--cza-bg-primary) 48%, transparent);
}

html[data-distribution="casazar"] .cookie-consent__eyebrow,
html[data-distribution="casazar"] .cookie-consent__link {
	color: var(--cza-gold-primary);
}

html[data-distribution="casazar"] .cookie-consent__title {
	color: var(--cza-text-primary);
}

html[data-distribution="casazar"] :is(.cookie-consent__copy, .cookie-consent__legal) {
	color: var(--cza-text-secondary);
}

html[data-distribution="casazar"] .cookie-consent__accept {
	border: 1px solid color-mix(in srgb, var(--cza-champagne) 58%, transparent);
	background: var(--ds-gradient-primary);
	box-shadow: 0 12px 28px color-mix(in srgb, var(--cza-gold-primary) 18%, transparent);
	color: var(--cza-text-invert);
}

html[data-distribution="casazar"] .cookie-consent__reject {
	border-color: var(--cza-border-2);
	background: color-mix(in srgb, var(--cza-surface-3) 88%, transparent);
	color: var(--cza-champagne);
}

html[data-distribution="casazar"] :is(.cookie-consent__accept, .cookie-consent__reject, .cookie-consent__link):focus-visible {
	outline: 2px solid var(--cza-champagne);
	outline-offset: 3px;
}

/* Shared participant-empty Home state: CasAzar contributes material only;
 * the Home Experience Resolver remains distribution-agnostic. */
html[data-distribution="casazar"] .participant-empty-onboarding__hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-color: var(--cza-border-1);
	background: linear-gradient(145deg, var(--cza-surface-2), var(--cza-bg-primary));
	box-shadow: var(--cza-shadow-2);
}

html[data-distribution="casazar"] .participant-empty-onboarding__hero::before {
	position: absolute;
	top: 50%;
	right: clamp(1rem, 4vw, 4.5rem);
	width: min(40%, 440px);
	aspect-ratio: 1;
	background: radial-gradient(circle, color-mix(in srgb, var(--cza-gold-primary) 22%, transparent) 0%, color-mix(in srgb, var(--cza-gold-primary) 8%, transparent) 34%, transparent 69%);
	content: '';
	filter: blur(8px);
	opacity: .9;
	pointer-events: none;
	transform: translateY(-50%);
	z-index: 0;
}

html[data-distribution="casazar"] .participant-empty-onboarding__agave {
	position: absolute;
	top: 50%;
	right: clamp(1rem, 4vw, 4.5rem);
	width: min(40%, 440px);
	aspect-ratio: 1;
	background: url('/brands/casazar/materials/casazar-agave-mark.png') center / contain no-repeat;
	opacity: .2;
	pointer-events: none;
	transform: translateY(-50%);
	z-index: 0;
}

html[data-distribution="casazar"] .participant-empty-onboarding__hero .participant-empty-onboarding__copy {
	position: relative;
	z-index: 1;
}

html[data-distribution="casazar"] .participant-empty-onboarding :is(h1, h2, strong) {
	color: var(--cza-text-primary);
}

html[data-distribution="casazar"] .participant-empty-onboarding :is(.participant-empty-onboarding__copy > p:not(.participant-empty-onboarding__eyebrow), .participant-empty-onboarding__journey header > p:not(.participant-empty-onboarding__eyebrow), .participant-empty-onboarding__steps p) {
	color: var(--cza-text-secondary);
}

html[data-distribution="casazar"] .participant-empty-onboarding__eyebrow,
html[data-distribution="casazar"] .participant-empty-onboarding__steps li > span {
	color: var(--cza-gold-primary);
}

html[data-distribution="casazar"] .participant-empty-onboarding__steps li {
	border-color: var(--cza-divider);
}

html[data-distribution="casazar"] .participant-empty-onboarding__wordmark {
	margin: 0 0 1.15rem;
}

@media (max-width: 760px) {
	html[data-distribution="casazar"] .participant-empty-onboarding__hero::before,
	html[data-distribution="casazar"] .participant-empty-onboarding__agave {
		top: 50%;
		right: -1.75rem;
		width: min(85vw, 360px);
	}

	html[data-distribution="casazar"] .participant-empty-onboarding__agave { opacity: .13; }
}