/*
 * MyOpal Design System. Mobile is the default, never a fixed device width.
 * Breakpoints: tablet 48rem; desktop 75rem. CSS variables cannot be used
 * in media conditions: keep these thresholds in sync with shell.css.
 */
:root {
	/* Collection components, following the MyOpal mini-program brand. */
	--myopal-catalog-dark: radial-gradient(circle at top right, #d8b46a38, transparent 32%), linear-gradient(180deg, #060606, #14110d);
	--myopal-catalog-gold: linear-gradient(135deg, #f1d28a, #c99a3a);
	--myopal-catalog-price: linear-gradient(135deg, #f1d28a, #d4a548 50%, #b8842d);
	/* Brand and surfaces */
	--myopal-color-black: #17130d;
	--myopal-color-gold: #d8b46a;
	--myopal-color-gold-light: #f6e6c0;
	--myopal-color-gold-ink: #805c20;
	--myopal-color-background: #f6f2ea;
	--myopal-color-surface: #fffdf8;
	--myopal-color-surface-raised: #ffffff;
	--myopal-color-surface-dark: var(--myopal-color-black);
	--myopal-color-ink: #17130d;
	--myopal-color-muted: #675a49;
	--myopal-color-subtle: #736754;
	--myopal-color-on-dark: #f6e6c0;
	--myopal-color-border: #ded5c7;
	--myopal-color-border-strong: #a99b86;
	--myopal-color-focus: var(--myopal-color-gold-ink);

	/* Semantic status colors, with readable foreground/background pairs */
	--myopal-color-success: #286044;
	--myopal-color-success-surface: #edf5ee;
	--myopal-color-warning: #805417;
	--myopal-color-warning-surface: #fff3dc;
	--myopal-color-error: #8b2635;
	--myopal-color-error-surface: #fff0f2;
	--myopal-color-danger: var(--myopal-color-error);

	--myopal-spec-light-ink:#fffdf8;
 --myopal-spec-dark-ink:#17130d;
 /* Typography: local system fonts; no third-party font requests */
	--myopal-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--myopal-font-display: Georgia, "Times New Roman", serif;
	--myopal-text-xs: 0.75rem;
	--myopal-text-sm: 0.875rem;
	--myopal-text-base: 1rem;
	--myopal-text-lg: 1.125rem;
	--myopal-text-xl: 1.5rem;
	--myopal-text-heading: clamp(2rem, 1.5rem + 2vw, 3rem);
	--myopal-weight-regular: 400;
	--myopal-weight-medium: 500;
	--myopal-weight-strong: 600;
	--myopal-weight-bold: 700;
	--myopal-leading-body: 1.65;
	--myopal-leading-heading: 1.2;
	--myopal-leading-compact: 1.4;
	--myopal-tracking-label: 0.12em;

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

	/* Corners and shadows */
	--myopal-radius-sm: 0.5rem;
	--myopal-radius-md: 0.75rem;
	--myopal-radius-lg: 1.5rem;
	--myopal-radius-pill: 999px;
	--myopal-shadow-card: 0 0.25rem 1.25rem rgb(23 19 13 / 6%);
	--myopal-shadow-overlay: 0 1rem 3rem rgb(23 19 13 / 18%);

	/* Layering */
	--myopal-layer-base: 0;
	--myopal-layer-navigation: 10;
	--myopal-layer-overlay: 100;
	--myopal-layer-dialog: 110;
	--myopal-layer-notice: 120;

	/* Content, controls and image proportions */
	--myopal-content-reading: 65ch;
	--myopal-content-wide: 80rem;
	--myopal-container-gutter: var(--myopal-space-5);
	--myopal-page-space: clamp(2.5rem, 6vw, 5rem);
	--myopal-floating-bottom: max(.5rem, env(safe-area-inset-bottom, 0px));
	--myopal-control-min-height: 2.75rem;
	--myopal-action-height: 2.75rem;
	--myopal-action-padding: .7rem 1.15rem;
	--myopal-action-font-size: .875rem;
	--myopal-action-background: var(--myopal-catalog-gold);
	--myopal-action-foreground: var(--myopal-color-black);
	--myopal-action-secondary-background: var(--myopal-color-surface);
	--myopal-action-secondary-foreground: var(--myopal-color-gold-ink);
	--myopal-action-danger-background: var(--myopal-color-error-surface);
	--myopal-action-danger-foreground: var(--myopal-color-error);
	--myopal-dock-gutter: .875rem;
	--myopal-dock-padding: .5rem .75rem;
 --myopal-dock-purchase-padding: 0;
  --myopal-header-content-height: 4rem;
  --myopal-header-stacked-height: 4.75rem;
 --myopal-header-hit: 2.75rem;
  --myopal-header-icon: 1.125rem;
  --myopal-header-title-size: .9375rem;
  --myopal-product-spec-size: .6875rem;
 --myopal-header-logo: 2rem;
 --myopal-header-gutter: 1rem;
 --myopal-chevron-small: .875rem;
 --myopal-chevron-large: 1.25rem;
 --myopal-close-icon: 1rem;
 --myopal-floating-action-size: 3rem;
 --myopal-nav-orb-size: 3.5rem;
 --myopal-nav-orb-rise: 1.5rem;
	--myopal-dock-radius: var(--myopal-radius-lg);
	--myopal-dock-shadow: 0 -.25rem 1.25rem rgb(23 19 13 / 14%);
	--myopal-dock-width: 42rem;
	--myopal-dock-icon: 1.25rem;
	--myopal-logo-max-width: 12rem;
	--myopal-image-ratio-product: 1 / 1;
	--myopal-image-ratio-landscape: 16 / 9;

	/* Components use these motion tokens and honor reduced-motion preferences. */
	--myopal-motion-duration: 160ms;
	--myopal-motion-easing: ease-out;
}

@media (min-width: 48rem) {
	:root {
		--myopal-container-gutter: var(--myopal-space-8);
	}
}

@media (min-width: 75rem) {
	:root {
		--myopal-container-gutter: var(--myopal-space-12);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--myopal-motion-duration: 0ms;
	}
}