/**
 * Omni Checkout — neutral gray palette
 * Canvas: #f3f4f5 · Accent: #1a1a1a (no warm/red seed)
 */

:root {
	--phi: 1.6180339887;
	--unit-17: 17px;

	/* MD3 tokens — neutral mapping for @material/web */
	--md-sys-color-primary: #1a1a1a;
	--md-sys-color-on-primary: #ffffff;
	--md-sys-color-primary-container: #e8e8e8;
	--md-sys-color-on-primary-container: #1a1a1a;
	--md-sys-color-secondary: #6b6b6b;
	--md-sys-color-on-secondary: #ffffff;
	--md-sys-color-secondary-container: #ececec;
	--md-sys-color-on-secondary-container: #1a1a1a;
	--md-sys-color-tertiary: #8a8a8a;
	--md-sys-color-on-tertiary: #ffffff;
	--md-sys-color-tertiary-container: #e8e8e8;
	--md-sys-color-on-tertiary-container: #1a1a1a;
	--md-sys-color-error: #ba1a1a;
	--md-sys-color-on-error: #ffffff;
	--md-sys-color-error-container: #ffdad6;
	--md-sys-color-on-error-container: #410002;
	--md-sys-color-surface: #f3f4f5;
	--md-sys-color-on-surface: #1a1a1a;
	--md-sys-color-on-surface-variant: #6b6b6b;
	--md-sys-color-surface-dim: #ececec;
	--md-sys-color-surface-bright: #f3f4f5;
	--md-sys-color-surface-container-lowest: #ffffff;
	--md-sys-color-surface-container-low: #f3f4f5;
	--md-sys-color-surface-container: #f3f4f5;
	--md-sys-color-surface-container-high: #ececec;
	--md-sys-color-surface-container-highest: #e8e8e8;
	--md-sys-color-outline: #d9d9d9;
	--md-sys-color-outline-variant: #e8e8e8;
	--md-sys-color-inverse-surface: #1a1a1a;
	--md-sys-color-inverse-on-surface: #f3f4f5;
	--md-sys-color-inverse-primary: #d9d9d9;

	/* Shape — rounded inputs/buttons */
	--md-sys-shape-corner-none: 0;
	--md-sys-shape-corner-extra-small: 4px;
	--md-sys-shape-corner-small: 10px;
	--md-sys-shape-corner-medium: 12px;
	--md-sys-shape-corner-large: 16px;
	--md-sys-shape-corner-extra-large: 20px;
	--md-sys-shape-corner-full: 9999px;

	/* 8dp spacing */
	--md-space-1: 8px;
	--md-space-2: 16px;
	--md-space-3: 24px;
	--md-space-4: 32px;
	--md-space-5: 40px;
	--md-space-6: 48px;

	/* Layout */
	--page-gutter: clamp(1rem, 2.5vw, 2.5rem);
	--checkout-content-inset: var(--page-gutter);
	--checkout-max-width: 1000px;
	--checkout-summary-col: 512px;
	--form-max-width: 460px;
	--line-item-thumb-size: 56px;
	--font-size-heading: calc(var(--font-size-base) * var(--phi));
	--checkout-brand-content-height: calc(
		var(--font-size-heading) * var(--line-height-tight)
	);
	--checkout-brand-offset: calc(
		var(--checkout-brand-content-height) + var(--md-space-3)
	);
	--layout-form-width: 61.8%;
	--layout-summary-width: 38.2%;
	--input-height: 48px;

	/* Legacy spacing */
	--space-1: var(--md-space-1);
	--space-2: var(--md-space-2);
	--space-3: var(--md-space-3);
	--space-4: var(--md-space-4);
	--space-5: var(--md-space-5);
	--space-6: var(--md-space-6);

	/* Typography */
	--font-family-label: 'Roboto Flex', system-ui, sans-serif;
	--font-family-input: 'Roboto Flex', system-ui, sans-serif;
	--font-family-sans: var(--font-family-label);
	--font-size-xs: 12px;
	--font-size-sm: 14px;
	--font-size-section: calc(var(--font-size-sm) * var(--phi));
	--font-size-base: var(--unit-17);
	--font-size-md: calc(var(--unit-17) * var(--phi));
	--font-size-lg: 28px;
	--font-size-xl: 36px;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--line-height-tight: 1.25;
	--line-height-base: 1.5;
	--line-height-relaxed: 1.6;

	/* Legacy radius */
	--radius-sm: var(--md-sys-shape-corner-small);
	--radius-md: var(--md-sys-shape-corner-medium);
	--radius-lg: var(--md-sys-shape-corner-large);
	--radius-pill: var(--md-sys-shape-corner-full);

	/* Legacy colors — single canvas */
	--color-bg: #f3f4f5;
	--color-summary-bg: #f3f4f5;
	--color-surface: #f3f4f5;
	--color-text: #1a1a1a;
	--color-text-muted: #6b6b6b;
	--color-text-subtle: #8a8a8a;
	--color-border: #d9d9d9;
	--color-border-strong: #1a1a1a;
	--color-border-subtle: #e8e8e8;

	--color-accent: #1a1a1a;
	--color-accent-hover: #333333;
	--color-accent-text: #ffffff;
	--color-accent-disabled-opacity: 0.45;

	--color-paypal: #ffc439;
	--color-paypal-hover: #f2b924;

	--color-input-bg: #ffffff;
	--color-input-border: #d9d9d9;
	--color-input-text: #1a1a1a;
	--color-focus-ring: #1a1a1a;

	--color-error: #ba1a1a;
	--color-warning-bg: #fff8e6;
	--color-warning-border: #f0d98c;
	--color-warning-text: #6b5700;

	--color-success-bg: #ecfdf3;
	--color-success-border: #abefc6;
	--color-success-text: #067647;

	--shadow-input-focus: 0 0 0 1px var(--color-focus-ring);

	/* MD web component theme hooks */
	--md-ref-typeface-brand: 'Roboto Flex';
	--md-ref-typeface-plain: 'Roboto Flex';
}

[data-theme='dark'] {
	color-scheme: dark;
	--md-sys-color-primary: #f5f5f5;
	--md-sys-color-on-primary: #111111;
	--md-sys-color-primary-container: #333333;
	--md-sys-color-on-primary-container: #f5f5f5;
	--md-sys-color-secondary: #a3a3a3;
	--md-sys-color-on-secondary: #111111;
	--md-sys-color-secondary-container: #262626;
	--md-sys-color-on-secondary-container: #f5f5f5;
	--md-sys-color-tertiary: #737373;
	--md-sys-color-on-tertiary: #111111;
	--md-sys-color-tertiary-container: #262626;
	--md-sys-color-on-tertiary-container: #f5f5f5;
	--md-sys-color-error: #ffb4ab;
	--md-sys-color-on-error: #690005;
	--md-sys-color-error-container: #93000a;
	--md-sys-color-on-error-container: #ffdad6;
	--md-sys-color-surface: #111111;
	--md-sys-color-on-surface: #f5f5f5;
	--md-sys-color-on-surface-variant: #a3a3a3;
	--md-sys-color-surface-dim: #111111;
	--md-sys-color-surface-bright: #1a1a1a;
	--md-sys-color-surface-container-lowest: #1a1a1a;
	--md-sys-color-surface-container-low: #111111;
	--md-sys-color-surface-container: #161616;
	--md-sys-color-surface-container-high: #262626;
	--md-sys-color-surface-container-highest: #333333;
	--md-sys-color-outline: #333333;
	--md-sys-color-outline-variant: #262626;
	--md-sys-color-inverse-surface: #f5f5f5;
	--md-sys-color-inverse-on-surface: #111111;
	--md-sys-color-inverse-primary: #333333;

	--color-bg: #111111;
	--color-summary-bg: #111111;
	--color-surface: #161616;
	--color-text: #f5f5f5;
	--color-text-muted: #a3a3a3;
	--color-text-subtle: #737373;
	--color-border: #333333;
	--color-border-strong: #f5f5f5;
	--color-border-subtle: #262626;
	--color-accent: #f5f5f5;
	--color-accent-hover: #e5e5e5;
	--color-accent-text: #111111;
	--color-input-bg: #1a1a1a;
	--color-focus-ring: #f5f5f5;
}

/* Checkout pages set data-theme explicitly; only follow OS dark when unset. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']):not([data-theme='dark']) {
		color-scheme: dark;
		--md-sys-color-primary: #f5f5f5;
		--md-sys-color-on-primary: #111111;
		--md-sys-color-primary-container: #333333;
		--md-sys-color-on-primary-container: #f5f5f5;
		--md-sys-color-secondary: #a3a3a3;
		--md-sys-color-on-secondary: #111111;
		--md-sys-color-secondary-container: #262626;
		--md-sys-color-on-secondary-container: #f5f5f5;
		--md-sys-color-tertiary: #737373;
		--md-sys-color-on-tertiary: #111111;
		--md-sys-color-tertiary-container: #262626;
		--md-sys-color-on-tertiary-container: #f5f5f5;
		--md-sys-color-error: #ffb4ab;
		--md-sys-color-on-error: #690005;
		--md-sys-color-error-container: #93000a;
		--md-sys-color-on-error-container: #ffdad6;
		--md-sys-color-surface: #111111;
		--md-sys-color-on-surface: #f5f5f5;
		--md-sys-color-on-surface-variant: #a3a3a3;
		--md-sys-color-surface-dim: #111111;
		--md-sys-color-surface-bright: #1a1a1a;
		--md-sys-color-surface-container-lowest: #1a1a1a;
		--md-sys-color-surface-container-low: #111111;
		--md-sys-color-surface-container: #161616;
		--md-sys-color-surface-container-high: #262626;
		--md-sys-color-surface-container-highest: #333333;
		--md-sys-color-outline: #333333;
		--md-sys-color-outline-variant: #262626;
		--md-sys-color-inverse-surface: #f5f5f5;
		--md-sys-color-inverse-on-surface: #111111;
		--md-sys-color-inverse-primary: #333333;

		--color-bg: #111111;
		--color-summary-bg: #111111;
		--color-surface: #161616;
		--color-text: #f5f5f5;
		--color-text-muted: #a3a3a3;
		--color-text-subtle: #737373;
		--color-border: #333333;
		--color-border-strong: #f5f5f5;
		--color-border-subtle: #262626;
		--color-accent: #f5f5f5;
		--color-accent-hover: #e5e5e5;
		--color-accent-text: #111111;
		--color-input-bg: #1a1a1a;
		--color-focus-ring: #f5f5f5;
	}
}