/*
 * Victor Digital Design System — Phase 2A token foundation.
 *
 * This file is deliberately value-compatible with the accepted Phase 1 UI.
 * Component-specific optical values remain protected by the compatibility
 * guards at the end of the file and can be reviewed in later phases.
 */

:root {
	/* Brand, action and semantic colors. */
	--victor-brand-blue: #4767ed;
	--victor-color-action: #155eef;
	--victor-color-action-hover: #0d4aca;
	--victor-color-action-soft: #f4f7ff;
	--victor-action: var( --victor-color-action );
	--victor-action-hover: var( --victor-color-action-hover );
	--victor-action-soft: var( --victor-color-action-soft );
	--victor-color-ink: #232323;
	--victor-ink: var( --victor-color-ink );
	--victor-text: var( --victor-color-ink );
	--victor-text-muted: #787878;
	--victor-text-subtle: #949494;
	--victor-surface: #fff;
	--victor-surface-soft: #f8f7f5;
	--victor-border: #e7e4e0;
	--victor-success: #067647;
	--victor-warning: #b54708;
	--victor-danger: #b42318;
	--victor-error: var( --victor-danger );
	/* Phase 2C semantic roles: values already present in the accepted UI. */
	--victor-text-inverse: #fff;
	--victor-surface-product: var( --victor-surface );
	--victor-surface-elevated: var( --victor-surface );
	--victor-border-strong: #d9d6d1;
	--victor-border-focus: var( --victor-action );
	--victor-border-selected: var( --victor-action );
	--victor-success-soft: #ecfdf3;
	--victor-warning-soft: #fffaeb;
	--victor-danger-soft: #fef3f2;
	--victor-info: var( --victor-action );
	--victor-info-soft: var( --victor-action-soft );
	--victor-care-ink: #171717;
	--victor-care-muted: #6a6a6a;

	/* Persian interface typography. */
	--victor-font-family: Peyda, Tahoma, Arial, sans-serif;
	--victor-font-interface: var( --victor-font-family );
	--victor-font-weight-regular: 400;
	--victor-font-weight-medium: 500;
	--victor-font-weight-semibold: 600;
	--victor-font-weight-bold: 700;
	--victor-font-weight-extrabold: 800;

	/* Role defaults, not a compulsory type scale. Only exact-value consumers
	 * migrate; responsive/optical overrides keep their existing declarations.
	 * Inherited sizes/line heights are not guessed. Provenance is in the 2C report.
	 */
	--victor-type-display-size: clamp(56px, 6.1vw, 82px);
	--victor-type-display-weight: var( --victor-font-weight-medium );
	--victor-type-display-line-height: .9;
	--victor-type-page-title-size: clamp(25px, 2.4vw, 34px);
	--victor-type-page-title-weight: var( --victor-font-weight-extrabold );
	--victor-type-page-title-line-height: 1.35;
	--victor-type-section-title-size: 26px;
	--victor-type-card-title-size: 22px;
	--victor-type-card-title-weight: var( --victor-font-weight-semibold );
	--victor-type-card-title-line-height: 1.3;
	--victor-type-body-size: 14px;
	--victor-type-body-small-size: 13px;
	--victor-type-label-size: 13px;
	--victor-type-label-weight: var( --victor-font-weight-bold );
	--victor-type-caption-size: 12px;
	--victor-type-button-size: 14px;
	--victor-type-button-weight: var( --victor-font-weight-bold );
	--victor-type-button-line-height: 1.2;
	--victor-type-price-size: 25px;
	--victor-type-price-weight: var( --victor-font-weight-extrabold );
	--victor-type-price-line-height: 1.45;
	--victor-type-badge-size: 12px;
	--victor-type-helper-size: 12px;
	--victor-type-error-size: 13px;

	/* Phase 2D: preserve Phase 1/2A numbering (space-2 is 6px, not 8px). */
	--victor-space-1: 4px;
	--victor-space-2: 6px;
	--victor-space-3: 8px;
	--victor-space-4: 10px;
	--victor-space-5: 12px;
	--victor-space-6: 16px;
	--victor-space-7: 20px;
	--victor-space-8: 24px;
	--victor-space-9: 28px;
	--victor-space-10: 32px;
	--victor-space-11: 40px;
	--victor-space-12: 48px;
	--victor-space-13: 64px;

	/* Shared shape and elevation primitives. */
	--victor-radius-sm: 6px;
	--victor-radius-md: 10px;
	--victor-radius-lg: 14px;
	--victor-radius-xl: 18px;
	--victor-radius-feature: var( --victor-radius-xl );
	--victor-radius-pill: 999px;
	--victor-radius-circle: 50%;
	--victor-shadow-soft: 0 5px 14px rgba( 16, 24, 40, .06 );
	--victor-shadow-standard: 0 12px 32px rgba( 20, 20, 20, .06 );

	/* Phase 2D geometry roles: exact-value aliases, not compulsory defaults.
	 * Provenance/exceptions: VICTOR-PHASE-2D-REPORT.md. Optical variants stay local. */
	--victor-gutter-compact: var( --victor-space-5 );
	--victor-gutter-mobile: var( --victor-space-6 );
	--victor-gutter-desktop: var( --victor-space-8 );
	--victor-card-padding: var( --victor-space-8 );
	--victor-card-padding-compact: var( --victor-space-7 );
	--victor-control-gap: var( --victor-space-3 );
	--victor-control-height: 46px;
	--victor-control-height-large: 48px;
	--victor-icon-control-size: 44px;
	--victor-radius-round: var( --victor-radius-circle );
	--victor-radius-control: 5px; /* Account; explicit Care/Checkout variants below. */
	--victor-radius-control-checkout: 9px;
	--victor-radius-control-care: 16px;
	--victor-radius-button: var( --victor-radius-sm );
	--victor-radius-button-checkout: var( --victor-radius-md );
	--victor-radius-card-small: var( --victor-radius-sm );
	--victor-radius-card: var( --victor-radius-md );
	--victor-radius-card-large: var( --victor-radius-xl );
	--victor-radius-badge: var( --victor-radius-pill );
	--victor-radius-chip: var( --victor-radius-pill );
	--victor-radius-media: var( --victor-radius-lg );
	--victor-radius-drawer: 0; /* Full-screen Shell; no rounding added. */
	--victor-radius-bottom-sheet: var( --victor-radius-lg );
	--victor-radius-bottom-sheet-compact: var( --victor-radius-md );
	--victor-radius-bottom-sheet-glass: 28px; /* Shop keeps all four corners. */
	--victor-radius-modal: var( --victor-radius-xl );
	--victor-border-width: 1px;
	--victor-border-default: var( --victor-border );
	--victor-border-disabled: var( --victor-border );
	--victor-divider: var( --victor-border );
	/* Strong/focus/selected keep Phase 2C colors; local rings/glass stay local. */
	--victor-shadow-none: none;
	--victor-shadow-medium: var( --victor-shadow-standard );
	--victor-shadow-floating: 0 8px 24px rgba( 20, 27, 42, .08 ), 0 2px 8px rgba( 20, 27, 42, .04 ), inset 0 1px 0 rgba( 255, 255, 255, .86 );
	--victor-shadow-bottom-sheet: 0 28px 80px rgba( 16, 24, 40, .25 );
	--victor-shadow-bottom-sheet-glass: 0 28px 70px rgba( 20, 37, 68, .24 ), inset 0 1px 0 #fff;
	--victor-shadow-modal: 0 24px 64px rgba( 20, 27, 42, .22 );
	--victor-shadow-action: 0 8px 18px rgba( 17, 24, 39, .13 );
	/* No universal hover/sticky/drawer shadow: configured/glass variants stay local. */

	/* Shared motion primitives. */
	--victor-motion-fast: 180ms;
	--victor-motion-standard: 220ms;
	--victor-motion-panel: 320ms;
	--victor-motion-ease: cubic-bezier( .2, .8, .2, 1 );

	/* Canonical defaults; existing high-risk overlay stacks stay unchanged. */
	--victor-z-content: 0;
	--victor-z-sticky: 80;
	--victor-z-header: 110;
	--victor-z-mobile-nav: 120;
	--victor-z-dropdown: 130;
	--victor-z-backdrop: 1000;
	--victor-z-drawer: 1010;
	--victor-z-modal: 1020;
	--victor-z-toast: 1030;

	/* Phase 2B effective Shell layers. Preserve the existing vendor/VPE stack;
	 * these are compatibility values, not a new scale to apply to page content.
	 * In particular, lowering drawers below the untouched VPE sheets is unsafe.
	 */
	--victor-z-shell-announcement: 9989;
	--victor-z-shell-header: 9990;
	--victor-z-shell-buybar: 110;
	--victor-z-shell-navigation: var( --victor-z-mobile-nav );
	--victor-z-shell-menu-trigger: var( --victor-z-dropdown );
	--victor-z-shell-product-sheet: 2147483001;
	--victor-z-shell-menu: 2147483100;
	--victor-z-shell-search: 2147483200;

	/* Documentation-only breakpoint values; CSS media queries remain unchanged. */
	--victor-breakpoint-compact: 390px;
	--victor-breakpoint-small: 600px;
	--victor-breakpoint-tablet: 768px;
	--victor-breakpoint-compact-desktop: 900px;
	--victor-breakpoint-desktop: 1024px;
	--victor-breakpoint-wide: 1280px;

	/* Future Loyalty/Pulse semantic hooks; no UI is created in Phase 2A. */
	--victor-loyalty-amount-color: var( --victor-ink );
	--victor-loyalty-tier-color: var( --victor-action );
	--victor-loyalty-progress-track: var( --victor-border );
	--victor-loyalty-progress-fill: var( --victor-action );
	--victor-loyalty-reward-surface: var( --victor-action-soft );
	--victor-loyalty-info-color: var( --victor-text-muted );

	/* Legacy aliases retained until their owning modules migrate in later phases. */
	--victor-ds-color-border: var( --victor-border );
	--victor-ds-color-canvas: var( --victor-surface-soft );
	--victor-ds-color-action: var( --victor-action );
	--victor-ds-radius-sm: var( --victor-radius-sm );
	--victor-ds-radius-md: var( --victor-radius-md );
	--victor-ds-radius-lg: var( --victor-radius-lg );
	--victor-ds-shadow-standard: var( --victor-shadow-standard );
	--victor-ui-ink: var( --victor-ink );
	--victor-ui-muted: var( --victor-text-muted );
	--victor-ui-line: var( --victor-border );
	--victor-ui-blue: var( --victor-action );
	--victor-ui-blue-50: var( --victor-action-soft );
	--victor-ui-radius-lg: var( --victor-radius-lg );
	--victor-ui-radius-md: var( --victor-radius-md );
	--victor-ui-radius-sm: var( --victor-radius-sm );
	--vpe-blue: var( --victor-action );
	--vpe-line: var( --victor-border );
	--vpe-surface: var( --victor-surface-soft );
	--vpe-green: var( --victor-success );
	--vpe-amber: var( --victor-warning );
	--vpe-radius-sm: var( --victor-radius-sm );
	--vpe-radius-md: var( --victor-radius-md );
	--vpe-radius-lg: var( --victor-radius-lg );
	--vpe-shadow: var( --victor-shadow-standard );
	--vax-ink: var( --victor-ink );
	--vax-muted: var( --victor-text-muted );
	--vax-soft: var( --victor-surface-soft );
	--vax-line: var( --victor-border );
	--vax-blue: var( --victor-action );
	--vs-blue: var( --victor-action );
	--vas-action: var( --victor-action );
}

/*
 * Compatibility guards.
 * Defining global tokens must not replace intentional module fallbacks. These
 * scoped values reproduce the exact accepted values from the Phase 1 audit.
 */
.victor-product-discovery,
.victor-sale-campaign {
	--victor-text-muted: #6a6a6a;
}

.victor-cashback-promo,
.victor-zee-promo {
	--victor-ink: #171717;
	--victor-text-muted: #6a6a6a;
}

.victor-hero {
	--victor-ink: #15171a;
}

.victor-shop-v2 {
	--victor-ink: #15171a;
	--victor-text-muted: #667085;
}

.victor-shell-search {
	--victor-ink: #1f2329;
	--victor-text-muted: #6f7580;
	--victor-text-subtle: #969ba4;
	--victor-border: rgba( 31, 35, 41, .1 );
}

.victor-shell-footer {
	--victor-ink: #1f2329;
	--victor-text-muted: #6f747d;
}

.victor-product-card {
	--victor-ink: #171717;
}

.victor-shell-product-action {
	--victor-ink: #22262c;
}

.victor-shell-product-menu {
	--victor-ink: #1f2329;
}

.victor-category-navigation__count {
	--victor-text-muted: #7a808b;
}

.victor-shell-product-menu__empty {
	--victor-text-muted: #6f7580;
}

.victor-shell-mobile-navigation {
	--victor-text-muted: #737983;
}

.victor-shell-mobile-navigation .victor-shell-mobile-navigation__item:hover {
	--victor-ink: #282b31;
}

.victor-shell-mobile-navigation .victor-shell-mobile-navigation__item.is-active,
.victor-shell-mobile-navigation .victor-shell-mobile-navigation__item.is-preview-active {
	--victor-ink: #17191d;
}

.victor-shell-mobile-navigation__item.is-disabled {
	--victor-text-subtle: #9a9ea6;
}

/* Phase 2E — opt-in UI primitives in the EXISTING once-loaded Core.
 * Public API uses victor-ui-* because victor-button is owned by Checkout.
 * Compatibility lists below preserve original selector specificity. They adopt
 * only the listed equivalent properties, NOT the full public component style.
 * State, events, labels, AJAX and markup remain owned by each module.
 */
.victor-ui-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--victor-control-gap);
	min-height: var(--victor-control-height);
	padding: var(--victor-space-4) var(--victor-space-7);
	border: var(--victor-border-width) solid var(--victor-ui-button-border, var(--victor-ink));
	border-radius: var(--victor-radius-button);
	background: var(--victor-ui-button-bg, var(--victor-ink));
	color: var(--victor-ui-button-ink, var(--victor-text-inverse));
	font-family: var(--victor-font-interface);
	font-size: var(--victor-type-button-size);
	font-weight: var(--victor-type-button-weight);
	line-height: var(--victor-type-button-line-height);
	text-decoration: none;
}
.victor-ui-button,
.vax button,
.vas-button { cursor: pointer; }
.victor-ui-button--primary { --victor-ui-button-bg: var(--victor-action); --victor-ui-button-border: var(--victor-action); }
.victor-ui-button--primary:hover { --victor-ui-button-bg: var(--victor-action-hover); }
.victor-ui-button--secondary { --victor-ui-button-bg: var(--victor-surface); --victor-ui-button-ink: var(--victor-ink); }
.victor-ui-button--ghost,
.victor-ui-button--text { --victor-ui-button-bg: transparent; --victor-ui-button-border: transparent; --victor-ui-button-ink: var(--victor-ink); }
.victor-ui-button--text { min-height: 0; padding: 0; text-decoration: underline; }
.victor-ui-button--danger { --victor-ui-button-bg: var(--victor-danger); --victor-ui-button-border: var(--victor-danger); }
.victor-ui-button:focus-visible,
.victor-ui-control:focus-visible { outline: var(--victor-border-width) solid var(--victor-border-focus); outline-offset: var(--victor-space-1); }
.victor-ui-button:disabled,
.victor-ui-button[aria-disabled="true"] { cursor: not-allowed; }
.victor-ui-button:active { border-color: var(--victor-border-selected); }
.victor-ui-button[aria-busy="true"],
.victor-ui-loading { cursor: progress; }

.victor-ui-button--icon,
.victor-shell-header .victor-shell-header__actions button.victor-shell-header__control,
.victor-shell-search button.victor-shell-search__clear,
.victor-shell-search button.victor-shell-search__close {
	width: var(--victor-icon-control-size);
	min-width: var(--victor-icon-control-size);
	height: var(--victor-icon-control-size);
	padding: 0;
	border-radius: var(--victor-radius-round);
}
.victor-ui-button--icon { min-height: var(--victor-icon-control-size); }

/* Native controls: only equivalent base height is adopted by existing forms.
 * Checkbox/radio and textarea sizes remain local; no appearance:none reset. */
.victor-ui-control,
.vax-form input,.vax-form select,.vax-form textarea,
.victor-customer-details input.input-text,.victor-customer-details select,.victor-customer-details textarea {
	min-height: var(--victor-control-height);
}
.victor-ui-control {
	box-sizing: border-box;
	width: 100%;
	padding: var(--victor-space-4) var(--victor-space-5);
	border: var(--victor-border-width) solid var(--victor-border-default);
	border-radius: var(--victor-radius-md);
	background: var(--victor-surface);
	color: var(--victor-text);
	font-family: var(--victor-font-interface);
}
.victor-ui-control[aria-invalid="true"] { border-color: var(--victor-danger); }
.victor-ui-control.is-success { border-color: var(--victor-success); }
.victor-ui-control:disabled,.victor-ui-control[readonly] { cursor: not-allowed; }
.victor-ui-check { accent-color: var(--victor-action); }
.victor-ui-field { display: grid; gap: var(--victor-control-gap); }
.victor-ui-field__label { font-weight: var(--victor-type-label-weight); }
.victor-ui-field__helper { color: var(--victor-text-muted); font-size: var(--victor-type-helper-size); }
.victor-ui-field__error { color: var(--victor-danger); font-size: var(--victor-type-error-size); }
.victor-ui-field__success { color: var(--victor-success); }

/* Card/tone foundations are opt-in; payment/product cards are NOT aliases. */
.victor-ui-card {
	border: var(--victor-border-width) solid var(--victor-border-default);
	border-radius: var(--victor-radius-card);
	padding: var(--victor-card-padding);
	background: var(--victor-surface);
}
.victor-ui-card--interactive:hover,.victor-ui-card--selected { border-color: var(--victor-border-selected); }
.victor-ui-card--summary { box-shadow: var(--victor-shadow-standard); }
.victor-ui-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--victor-space-2);
	padding: var(--victor-space-1) var(--victor-space-3);
	border-radius: var(--victor-radius-badge);
	font-size: var(--victor-type-badge-size);
}
.victor-ui-badge,.victor-ui-alert {
	background: var(--victor-ui-tone-surface, var(--victor-surface-soft));
	color: var(--victor-ui-tone-ink, var(--victor-ink));
}
.victor-ui-tone--neutral { --victor-ui-tone-surface: var(--victor-surface-soft); --victor-ui-tone-ink: var(--victor-ink); }
.victor-ui-tone--info,.victor-ui-tone--selected { --victor-ui-tone-surface: var(--victor-info-soft); --victor-ui-tone-ink: var(--victor-info); }
.victor-ui-tone--success { --victor-ui-tone-surface: var(--victor-success-soft); --victor-ui-tone-ink: var(--victor-success); }
.victor-ui-tone--warning { --victor-ui-tone-surface: var(--victor-warning-soft); --victor-ui-tone-ink: var(--victor-warning); }
.victor-ui-tone--danger { --victor-ui-tone-surface: var(--victor-danger-soft); --victor-ui-tone-ink: var(--victor-danger); }
.victor-ui-alert { padding: var(--victor-space-5) var(--victor-space-6); border-radius: var(--victor-radius-lg); }
.victor-ui-empty,
.vax-empty-state,
.victor-shell-search__empty,
.victor-shell-search__error { text-align: center; }
.victor-ui-empty { display: grid; justify-items: center; gap: var(--victor-space-4); padding: var(--victor-card-padding); }
.victor-ui-empty__description { color: var(--victor-text-muted); }
.victor-ui-skeleton { background: var(--victor-border); border-radius: var(--victor-radius-sm); }

/* Overlay visual subset: original local radii, safe-area, widths, animation,
 * backdrops and z-index remain unchanged. No Product controller is shared. */
.victor-ui-overlay__panel,
.vpe-size-finder__dialog,
.vpe-variant-sheet__dialog {
	position: relative;
	overflow-y: auto;
	box-shadow: var(--victor-shadow-bottom-sheet);
}
.victor-ui-overlay__header,.victor-ui-overlay__footer { display: flex; align-items: center; gap: var(--victor-space-5); }
.victor-ui-overlay__body { min-width: 0; }
.victor-ui-overlay__backdrop { position: absolute; inset: 0; }
.victor-ui-loading--wait,
.vpe-size-finder__form > button.is-loading { cursor: wait; }