:root {
  /* Primitive palette adapted from violineseacraft.local. */
  --color-neutral-0: #ffffff;
  --color-neutral-50: hsl(40 47% 96%);
  --color-neutral-100: hsl(36 39% 98%);
  --color-neutral-200: hsl(36 10% 86%);
  --color-neutral-300: hsl(36 8% 74%);
  --color-neutral-500: #626c67;
  --color-neutral-700: #3b403e;
  --color-neutral-900: #181a19;

  --color-brand-sage-d2: #626c67;

  /* Neutral semantic defaults are safe for shared/auth/admin surfaces. */
  --color-background: var(--color-neutral-100);
  --color-surface: var(--color-neutral-0);
  --color-surface-soft: var(--color-neutral-50);
  --color-surface-selected: var(--color-neutral-200);
  --color-text: var(--color-neutral-900);
  --color-text-muted: var(--color-neutral-500);
  --color-text-subtle: var(--color-neutral-700);
  --color-border: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-primary: var(--color-neutral-700);
  --color-primary-dark: var(--color-neutral-900);
  --color-primary-soft: var(--color-neutral-200);
  --color-on-primary: #ffffff;
  --color-danger: hsl(351 70% 38%);
  --color-danger-soft: hsl(351 65% 95%);
  --color-danger-border: hsl(351 55% 78%);
  --color-success: hsl(136 55% 33%);
  --color-success-soft: hsl(136 55% 92%);
  --color-success-border: hsl(136 45% 76%);
  --color-success-text: var(--color-success);
  --color-warning: hsl(36 65% 35%);
  --color-warning-soft: hsl(36 65% 92%);
  --color-warning-border: hsl(36 55% 76%);
  --color-info-border: var(--color-neutral-300);
  --color-focus: hsl(220 80% 45%);
  --color-on-danger: #ffffff;
  --color-canvas: var(--color-neutral-0);

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-pill: 999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  --container-max-width: 1160px;
  /* Reference values only — custom properties cannot appear inside an
     @media condition in plain CSS (no build step resolves them here), so
     every actual @media (max-width: …) rule repeats the literal px value.
     Keep these three in sync with the .storefront-header/.storefront-nav
     collapse points (980/760/560) if that scale ever changes; components
     with their own content-driven breakpoint (product grid, checkout
     layout, etc.) are expected to use their own literal values. */
  --breakpoint-tablet: 980px;
  --breakpoint-mobile: 760px;
  --breakpoint-small: 560px;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.9375rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;

  --shadow-sm: 0 2px 6px hsl(150 7% 12% / 0.08);
  --shadow-md: 0 8px 24px hsl(150 7% 12% / 0.12);
  --duration-fast: 160ms;
  --duration-standard: 220ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --z-dropdown: 20;
  --z-sticky: 30;
  --z-toast: 60;
  --z-skip-link: 70;

  /* Minimum interactive target size. WCAG 2.2 AA (2.5.8) requires 24px; this project
     adopts the stricter 44px AAA-level target so touch controls stay comfortable on
     phones and tablets, which is where shop owners do most of their admin work. */
  --touch-target-min: 2.75rem;

  /* Built-in help ("Manual") reading surface. Semantic aliases so the help
     stylesheet stays free of raw primitives while reading as its own world. */
  --help-measure: 42rem;
  --help-column-gap: 2.5rem;
  --help-rail-width: 12rem;
  --help-page-pad-block: 3rem;
  --help-page-pad-inline: 3.25rem;
  --help-page-pad-inline-narrow: 1.5rem;
  --help-lead-size: 1.05rem;
  --help-prose-size: 1rem;
  --help-prose-leading: 1.72;
  --help-h2-size: 1.3rem;
  --help-h3-size: 1.05rem;
  --help-title-size: 2.2rem;
  --help-title-tracking: -0.035em;
  --help-block-gap: 1.75rem;
  --help-index-gutter: 1.75rem;
  --help-list-indent: 1.35rem;
  --help-bullet-offset: 0.62em;
  --help-step-gap: 1.15rem;
  --help-step-marker: 1.6rem;
  --help-step-indent: 2.6rem;
  --help-radius-plate: 0.875rem;
  --help-radius-figure: 0.625rem;
  --help-kicker-size: 0.72rem;
  --help-kicker-tracking: 0.08em;
  --help-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --help-rule: hsl(36 10% 86%);
  --help-rule-strong: hsl(36 8% 74%);
  --help-marker-ink: hsl(36 20% 30%);
  --help-marker-fill: hsl(40 47% 96%);
  --help-plate-fill: hsl(36 39% 98%);
  --help-selection: hsl(72 80% 82%);
}

/* Violineseacraft storefront framework.
   Raw values live in this one block. Storefront rules use the semantic scale
   below; the --store-* hooks exist only so the published branding response can
   safely replace the editable primary colour at runtime. */
.public-scaffold {
  /* Theme colours. */
  --store-primary: #4e5552;
  --store-on-primary: #ffffff;
  --store-accent: #77827d;
  --primary: var(--store-primary);
  --brand-surface: var(--color-brand-sage-d2);
  --text-on-brand-surface: var(--color-neutral-0);
  --primary-5: color-mix(in srgb, var(--primary) 5%, transparent);
  --bg-surface: #faf9f7;
  --bg-surface-soft: #f1efeb;
  --bg-card: #e8e5df;
  --light: #ffffff;
  --dark: #181a19;
  --text-body: var(--dark);
  --text-muted: #4e5552;
  --text-subtle: rgb(24 26 25 / 55%);
  --text-on-primary: var(--store-on-primary);
  --measure-search-min: 7rem;
  --measure-search-max: 14rem;
  --fluid-search-width: 14vw;
  --icon-stroke-width: 1.5;
  --swatch-dark: #70695f;
  --swatch-light: #f4f4f1;
  --border-primary: rgb(24 26 25 / 14%);
  --border-subtle: rgb(24 26 25 / 8%);
  --border-hairline: rgb(24 26 25 / 10%);
  --border-control: rgb(41 44 43 / 24%);
  --border-on-media: rgb(255 255 255 / 25%);
  --focus: var(--dark);
  --shadow-color: rgb(24 26 25 / 22%);
  --overlay-dark: rgb(24 26 25 / 54%);
  --overlay-dark-soft: rgb(24 26 25 / 42%);
  --overlay-dark-deep: rgb(24 26 25 / 52%);
  --overlay-light: rgb(255 255 255 / 78%);
  --overlay-scrim-faint: rgb(24 26 25 / 8%);
  --scrim-stop: 62%;

  /* Type scale. The root remains the accessible 16px default; only these
     tokens carry the fluid interpolation used by the public storefront. */
  --font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --text-xs: clamp(0.6875rem, 0.64rem + 0.08vw, 0.8125rem);
  --text-s: clamp(0.8125rem, 0.75rem + 0.1vw, 0.9375rem);
  --text-m: clamp(0.9375rem, 0.84rem + 0.18vw, 1.125rem);
  --text-l: clamp(1.125rem, 1rem + 0.38vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.25rem + 0.7vw, 2rem);
  --text-2xl: clamp(1.75rem, 1.25rem + 1.5vw, 3rem);
  --text-3xl: clamp(2rem, 1.2rem + 2.4vw, 4rem);
  --text-4xl: clamp(2.5rem, 1.55rem + 3.5vw, 4.25rem);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-none: 1;
  --leading-display: 0.91;
  --leading-tight: 0.96;
  --leading-snug: 1.08;
  --leading-copy-tight: 1.15;
  --leading-copy: 1.45;
  --leading-body: 1.6;
  --tracking-display: -0.025em;
  --tracking-tight: -0.005em;
  --tracking-subtle: 0.04em;
  --tracking-label: 0.16em;
  --tracking-wide: 0.2em;
  --tracking-negative: -0.02em;
  --underline-offset: 0.28em;

  /* Fluid spacing scale. */
  --space-0: 0;
  --space-4xs: clamp(0.5rem, 0.45rem + 0.1vw, 0.6rem);
  --space-3xs: clamp(0.625rem, 0.55rem + 0.16vw, 0.75rem);
  --space-2xs: clamp(0.75rem, 0.65rem + 0.2vw, 0.9rem);
  --space-xs: clamp(0.875rem, 0.75rem + 0.4vw, 1.125rem);
  --space-s: clamp(1rem, 0.8rem + 0.65vw, 1.5rem);
  --space-m: clamp(1.25rem, 1rem + 1.15vw, 2rem);
  --space-l: clamp(1.5rem, 1.15rem + 1.87vw, 2.75rem);
  --space-xl: clamp(2rem, 1.4rem + 2.96vw, 4rem);
  --space-2xl: clamp(2.5rem, 1.6rem + 4.58vw, 5rem);
  --space-3xl: clamp(3.25rem, 1.75rem + 6.97vw, 7rem);
  --space-4xl: clamp(4rem, 2rem + 10.46vw, 10rem);
  --section-space: var(--space-xl);
  --section-space-wide: var(--space-2xl);

  /* Layout, media, and control tokens. */
  --size-full: 100%;
  --viewport-height: 100vh;
  --viewport-half-height: 50vh;
  --viewport-small-height: 100svh;
  --viewport-width: 100vw;
  --position-center: 50%;
  --position-center-negative: -50%;
  --offset-menu: 0.16rem;
  --offset-menu-negative: -0.16rem;
  --fluid-small: 2vw;
  --fluid-medium: 4vw;
  --fluid-category-gap: 3vw;
  --fluid-menu: 5vw;
  --fluid-heading: 4.6vw;
  --fluid-brand-width: 42vw;
  --fluid-logo-width: 43vw;
  --fluid-wordmark-width: 32vw;
  --page-gutter: 1rem;
  --page-max: 1400px;
  --header-height: clamp(4rem, 3.5rem + 1vw, 4.5rem);
  --header-content-offset: 8.1rem;
  --surface-opacity: 94%;
  --measure-document: 78rem;
  --measure-copy: 68ch;
  --measure-copy-wide: 70ch;
  --measure-copy-short: 52ch;
  --measure-copy-panel: 52rem;
  --measure-toc: 36rem;
  --measure-title: 14ch;
  --measure-title-compact: 12ch;
  --measure-feature-title: 15ch;
  --measure-hero-title: 25ch;
  --measure-hero-note: 34ch;
  --measure-hero-note-mobile: 31ch;
  --measure-product-title: 18ch;
  --measure-menu-feature: 14rem;
  --measure-menu-column: 11rem;
  --measure-dialog: 34rem;
  --measure-auth-panel: 27rem;
  --measure-form: 50rem;
  --measure-contact: 42rem;
  --measure-section-image: 56rem;
  --measure-summary: 20rem;
  --measure-checkout-form: 42rem;
  --measure-checkout-summary: 34rem;
  --measure-field: 10rem;
  --measure-field-small: 9rem;
  --measure-add-to-cart: 12rem;
  /* A cart thumbnail is a receipt-row identifier, not a product card, so it
     stays a fixed small square rather than a fluid column. */
  --measure-cart-panel: 26rem;
  --checkout-badge-size: 1.125rem;
  --checkout-step-size: 1.25rem;
  --checkout-summary-media-size: 4rem;
  /* "Same as shipping" switch and the terms checkbox. */
  --checkout-switch-width: 2.5rem;
  --checkout-switch-height: 1.375rem;
  --checkout-switch-knob: 1.05rem;
  --checkout-switch-inset: 0.16rem;
  --checkout-switch-travel: 1.125rem;
  --checkout-check-size: 1.25rem;
  --checkout-check-tick-width: 0.32rem;
  --checkout-check-tick-height: 0.6rem;
  --checkout-check-tick-left: 0.4rem;
  --checkout-check-tick-top: 0.16rem;
  --checkout-check-tick-border: 2px;
  --cart-media-column: 5rem;
  --cart-stepper-size: 1.75rem;
  --cart-stepper-field: 1.75rem;
  --cart-stepper-icon: 0.75rem;
  --swatch-size: 0.75rem;
  --choice-control-size: 1rem;
  --measure-column-min: 16rem;
  --measure-column-wide: 8rem;
  --measure-wordmark: 28rem;
  --measure-logo: 19rem;
  --control-min-height: 2.75rem;
  --control-height: 3.35rem;
  --control-icon-size: 1rem;
  --choice-control-offset: 0.1rem;
  --brand-mark-size: 1.8rem;
  --menu-icon-width: 1.375rem;
  --trust-badge-icon-size: 1.75rem;
  --line-width: 1px;
  --hidden-clip-size: 1px;
  --focus-width: 2px;
  --focus-offset: 3px;
  --radius-circle: 50%;
  --ratio-square: 1;
  --ratio-payment-card: 856 / 540;
  --ratio-feature: 5 / 4;
  --ratio-feature-mobile: 4 / 3;
  --ratio-product: 4 / 5;
  --ratio-gallery: 0.9 / 1;
  --ratio-gallery-lead: 1.08 / 1;

  /* Reusable grid recipes. */
  --columns-one: 1fr;
  --columns-two: repeat(2, minmax(0, 1fr));
  --columns-three: repeat(3, minmax(0, 1fr));
  --columns-four: repeat(4, minmax(0, 1fr));
  --columns-header: repeat(3, minmax(0, 1fr));
  --columns-hero: minmax(0, 1fr) minmax(var(--measure-column-min), var(--measure-wordmark));
  --columns-editorial: minmax(0, 1fr) minmax(var(--measure-field), 0.78fr);
  --columns-mega-menu-full: minmax(var(--measure-menu-column), 0.72fr) minmax(0, 2.28fr);
  --columns-footer: minmax(0, 1.7fr) minmax(var(--measure-column-min), 1.1fr);
  --columns-checkout: minmax(0, 1.08fr) minmax(var(--measure-column-min), 0.92fr);
  --columns-product: minmax(0, 1.2fr) minmax(var(--measure-summary), 0.8fr);
  --columns-product-tablet: minmax(0, 1fr) minmax(var(--measure-wordmark), 0.8fr);
  --columns-search: minmax(0, 2fr) minmax(var(--measure-field), 1fr) minmax(var(--measure-field-small), 0.8fr) auto;
  --columns-search-tablet: var(--columns-one) var(--columns-one);
  /* State, layer, and motion tokens. */
  --opacity-none: 0;
  --opacity-full: 1;
  --opacity-disabled: 0.45;
  --opacity-hover: 0.6;
  --opacity-hover-strong: 0.7;
  --opacity-muted: 0.72;
  --opacity-secondary: 0.86;
  --opacity-soft: 0.98;
  --layer-base: 0;
  --layer-content: 1;
  --layer-notice: 35;
  --layer-header: 40;
  --layer-dialog: 60;
  --motion-none: 0ms;
  --motion-fast: 160ms;
  --motion-standard: 200ms;
  --motion-slow: 600ms;
  --motion-hero: 2.4s;
  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-image: cubic-bezier(0.25, 1, 0.5, 1);
  --scale-hover: 1.03;
  --scale-hover-subtle: 1.025;
  --filter-hero-tone: saturate(0.88) brightness(0.96);

}