/* NAF Scents design tokens. Layer 1 preserves the shipped Tailwind and UI values. */
:root {
  /* Layer 1 — upstream design-system primitives */
  --ds-color-canvas: var(--color-canvas-white, #FFFFFF);
  --ds-color-white: var(--color-white, #fff);
  --ds-color-black: var(--color-black, #000);
  --ds-color-text: var(--color-on-surface, #1a1c1c);
  --ds-color-text-muted: var(--color-secondary, #5f5e5d);
  --ds-color-text-subtle: #605e5c;
  --ds-color-outline-text: #706a64;
  --ds-color-outline: var(--color-outline, #7c766f);
  --ds-color-border: var(--color-outline-variant, #cdc5bd);
  --ds-color-page: var(--color-surface-container-low, #f4f3f2);
  --ds-color-surface: var(--color-surface, #faf9f8);
  --ds-color-surface-control: var(--color-surface-container, #efeeed);
  --ds-color-ink: #000000;
  --ds-color-primary: var(--color-primary, #000000);
  --ds-color-link: var(--color-primary, #000000);
  --ds-color-interactive-hover: var(--color-surface-container, #efeeed);
  --ds-color-interactive-active: var(--color-surface-container-high, #e9e8e7);
  --ds-color-interactive-disabled: #605e5c;
  --ds-color-oud: #2b2520;
  --ds-color-earth: #3E362F;
  --ds-color-secondary: var(--color-secondary, #545352);
  --ds-color-sand: #A89C90;
  --ds-color-champagne: #d6c7b7;
  --ds-color-error: var(--color-crimson-sale, #DC2626);
  --ds-color-success: var(--color-emerald-origin, #16A34A);
  --ds-color-warning: var(--color-amber-500, oklch(76.9% 0.188 70.08));
  --ds-color-transparent: transparent;
  --ds-color-scrollbar-thumb: var(--color-on-primary-container, #868381);
  --ds-color-outline-variant-20: color-mix(in srgb, #cdc5bd 20%, transparent);
  --ds-color-outline-variant-25: color-mix(in srgb, #cdc5bd 25%, transparent);
  --ds-color-outline-variant-30: color-mix(in srgb, #cdc5bd 30%, transparent);
  --ds-color-primary-20: color-mix(in srgb, #000000 20%, transparent);
  --ds-color-warning-subtle: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
  --ds-color-black-60: color-mix(in srgb, #000 60%, transparent);
  --ds-color-black-80: color-mix(in srgb, #000 80%, transparent);
  --ds-color-canvas-90: color-mix(in srgb, #FFFFFF 90%, transparent);
  --ds-color-canvas-95: color-mix(in srgb, #FFFFFF 95%, transparent);
  --ds-color-success-subtle: color-mix(in srgb, #16A34A 10%, transparent);
  --ds-color-secondary-subtle: color-mix(in srgb, #5f5e5d 5%, transparent);
  --ds-color-current-muted: color-mix(in oklab, currentColor 50%, transparent);

  --ds-space-0: 0;
  --ds-space-unit: var(--spacing, 0.25rem);
  --ds-space-1: var(--ds-space-unit);
  --ds-space-2: calc(var(--ds-space-unit) * 2);
  --ds-space-3: calc(var(--ds-space-unit) * 3);
  --ds-space-4: calc(var(--ds-space-unit) * 4);
  --ds-space-5: calc(var(--ds-space-unit) * 5);
  --ds-space-6: calc(var(--ds-space-unit) * 6);
  --ds-space-8: calc(var(--ds-space-unit) * 8);
  --ds-space-10: calc(var(--ds-space-unit) * 10);
  --ds-space-12: calc(var(--ds-space-unit) * 12);
  --ds-space-auto: auto;

  --ds-font-body: var(--font-body-md, Manrope, sans-serif);
  --ds-font-display: var(--font-headline-sm, "Noto Serif", serif);
  --ds-font-arabic: "Noto Naskh Arabic", "Scheherazade New", "Amiri", serif;
  --ds-font-icons: "Material Symbols Outlined";
  --ds-font-mono: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  --ds-font-inherit: inherit;
  --ds-font-size-inherit: inherit;
  --ds-font-size-relative-code: 1em;
  --ds-font-size-relative-small: 80%;
  --ds-font-size-relative-script: 75%;
  --ds-font-size-10: 10px;
  --ds-font-size-11: 11px;
  --ds-font-size-12: 12px;
  --ds-font-size-13: 13px;
  --ds-font-size-14: 14px;
  --ds-font-size-16: 16px;
  --ds-font-size-18: 18px;
  --ds-font-size-20: 20px;
  --ds-font-size-22: 22px;
  --ds-font-size-24: 24px;
  --ds-font-size-44: 44px;
  --ds-font-weight-inherit: inherit;
  --ds-font-weight-bolder: bolder;
  --ds-font-weight-normal: var(--font-weight-normal, 400);
  --ds-font-weight-medium: var(--font-weight-medium, 500);
  --ds-font-weight-semibold: var(--font-weight-semibold, 600);
  --ds-font-weight-bold: var(--font-weight-bold, 700);
  --ds-line-height-zero: 0;
  --ds-line-height-tight: 1.2;
  --ds-line-height-compact: 1.3;
  --ds-line-height-body: 1.5;
  --ds-line-height-hero: 52px;
  --ds-letter-spacing-wide: 0.3em;

  --ds-radius-none: 0;
  --ds-radius-control: var(--radius-lg, 0.25rem);
  --ds-radius-card: var(--radius-xl, 0.5rem);
  --ds-radius-panel: var(--radius-2xl, 1rem);
  --ds-radius-pill: 999px;
  --ds-shadow-search: 0 14px 40px rgba(0, 0, 0, 0.14);
  --ds-shadow-header-tight: 0 -1px 6px rgba(0, 0, 0, 0.02);
  --ds-shadow-control: 0 1px 4px rgba(0, 0, 0, 0.04);
  --ds-shadow-header: 0 1px 8px rgba(0, 0, 0, 0.04);
  --ds-shadow-inset: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --ds-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --ds-shadow-lg: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --ds-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --ds-shadow-drop-xl: drop-shadow(0 9px 7px rgb(0 0 0 / 0.1));
  --ds-ring-width: 1px;
  --ds-z-content: 10;
  --ds-z-navigation: 40;
  --ds-z-header: 50;
  --ds-z-search: 80;
  --ds-z-skip-link: 1000;
  --ds-duration-instant: 0.001ms;
  --ds-duration-fast: 150ms;
  --ds-duration-base: 200ms;
  --ds-duration-medium: 300ms;
  --ds-duration-slow: 500ms;
  --ds-duration-slower: 700ms;
  --ds-easing-standard: ease;
  --ds-transition-none: none;
  --ds-transition-color: color var(--ds-duration-base) var(--ds-easing-standard);
  --ds-transition-opacity: opacity var(--ds-duration-medium) var(--ds-easing-standard);
  --ds-transition-shadow: box-shadow var(--ds-duration-base) var(--ds-easing-standard);
  --ds-transition-transform: transform var(--ds-duration-base) var(--ds-easing-standard);
  --ds-space-negative-pixel: -1px;
  --ds-space-negative-quarter-em: -0.25em;
  --ds-space-negative-half-em: -0.5em;
  --ds-space-auto-center: 0 auto;
  --ds-space-scroll-offset: 15rem;
  --ds-space-skip-link-padding: 0.7rem 1rem;
  --ds-space-search-offset: 5.25rem 1rem auto 1rem;
  --ds-space-search-offset-mobile: 5.1rem;
  --ds-space-search-input-padding: 0.7rem 0.85rem;
  --ds-space-search-help-top: 0.55rem;
  --ds-line-height-22: 22px;
  --ds-line-height-24: 24px;
  --ds-line-height-26: 26px;
  --ds-line-height-28: 28px;
  --ds-line-height-40: 40px;
  --ds-line-height-48: 48px;

  /* Additional audited upstream primitives. */
  --ds-color-0b0a09-1: #000000;
  --ds-color-f6f5f4-2: #F6F5F4;
  --ds-color-color-mix-in-srgb-oklch-76-9-0-188-70--3: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
  --ds-color-color-mix-in-srgb-16a34a-10-transparen-4: color-mix(in srgb, #16A34A 10%, transparent);
  --ds-color-d6c7b7-5: #d6c7b7;
  --ds-color-1a1c1c-6: #1a1c1c;
  --ds-color-605e5c-7: #605e5c;
  --ds-color-0b0a09-8: #000000;

  --ds-size-scrollbar: 10px;
  --ds-size-scrollbar-compact: 8px;

  /* Layer 1 aliases for upstream utility-framework tokens. */
  --ds-upstream-container-2xl: var(--container-2xl, 42rem);
  --ds-upstream-container-3xl: var(--container-3xl, 48rem);
  --ds-upstream-container-7xl: var(--container-7xl, 80rem);
  --ds-upstream-container-lg: var(--container-lg, 32rem);
  --ds-upstream-container-md: var(--container-md, 28rem);
  --ds-upstream-container-sm: var(--container-sm, 24rem);
  --ds-upstream-container-xl: var(--container-xl, 36rem);
  --ds-upstream-animate-pulse: var(--animate-pulse, pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite);
  --ds-upstream-leading-relaxed: var(--leading-relaxed, 1.625);
  --ds-upstream-leading-snug: var(--leading-snug, 1.375);
  --ds-upstream-drop-shadow-xl: var(--drop-shadow-xl, 0 9px 7px rgb(0 0 0 / 0.1));
  --ds-upstream-blur-md: var(--blur-md, 12px);

  /* Layer 1 upstream design-token bridge. */
  --ds-upstream-font-sans: var(--font-sans, initial);
  --ds-upstream-font-mono: var(--font-mono, initial);
  --ds-upstream-default-font-family: var(--default-font-family, var(--naf-upstream-font-sans));
  --ds-upstream-default-font-feature-settings: var(--default-font-feature-settings, initial);
  --ds-upstream-default-font-variation-settings: var(--default-font-variation-settings, initial);
  --ds-upstream-default-mono-font-family: var(--default-mono-font-family, var(--naf-upstream-font-mono));
  --ds-upstream-default-mono-font-feature-settings: var(--default-mono-font-feature-settings, initial);
  --ds-upstream-default-mono-font-variation-settings: var(--default-mono-font-variation-settings, initial);
  --ds-upstream-color-surface-container-high: var(--color-surface-container-high, #e9e8e7);
  --ds-upstream-radius-2xl: var(--radius-2xl, 1rem);
  --ds-upstream-radius-full: var(--radius-full, .75rem);
  --ds-upstream-radius-lg: var(--radius-lg, .25rem);
  --ds-upstream-radius-xl: var(--radius-xl, .5rem);
  --ds-upstream-color-outline-variant: var(--color-outline-variant, #cdc5bd);
  --ds-upstream-color-primary: var(--color-primary, #000000);
  --ds-upstream-color-amber-500: var(--color-amber-500, oklch(76.9% 0.188 70.08));
  --ds-upstream-color-black: var(--color-black, #000);
  --ds-upstream-color-canvas-white: var(--color-canvas-white, #FFFFFF);
  --ds-upstream-color-emerald-origin: var(--color-emerald-origin, #16A34A);
  --ds-upstream-color-secondary: var(--color-secondary, #5f5e5d);
  --ds-upstream-color-surface: var(--color-surface, #faf9f8);
  --ds-upstream-color-surface-container: var(--color-surface-container, #efeeed);
  --ds-upstream-color-surface-container-low: var(--color-surface-container-low, #f4f3f2);
  --ds-upstream-color-surface-container-lowest: var(--color-surface-container-lowest, #ffffff);
  --ds-upstream-color-red-400: var(--color-red-400, oklch(70.4% 0.191 22.216));
  --ds-upstream-color-blue-400: var(--color-blue-400, oklch(70.7% 0.165 254.624));
  --ds-upstream-font-body-lg: var(--font-body-lg, Manrope, sans-serif);
  --ds-upstream-font-body-md: var(--font-body-md, Manrope, sans-serif);
  --ds-upstream-font-display-hero: var(--font-display-hero, "Noto Serif", sans-serif);
  --ds-upstream-font-eyebrow: var(--font-eyebrow, Manrope, sans-serif);
  --ds-upstream-font-headline-lg: var(--font-headline-lg, "Noto Serif", sans-serif);
  --ds-upstream-font-headline-md: var(--font-headline-md, "Noto Serif", sans-serif);
  --ds-upstream-font-headline-sm: var(--font-headline-sm, "Noto Serif", sans-serif);
  --ds-upstream-font-label-nav: var(--font-label-nav, Manrope, sans-serif);
  --ds-upstream-font-price-lg: var(--font-price-lg, Manrope, sans-serif);
  --ds-upstream-font-price-strikethrough: var(--font-price-strikethrough, Manrope, sans-serif);
  --ds-upstream-font-serif: var(--font-serif, ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif);
  --ds-upstream-font-title-card: var(--font-title-card, "Noto Serif", sans-serif);
  --ds-upstream-text-body-lg: var(--text-body-lg, 16px);
  --ds-upstream-text-body-lg--line-height: var(--text-body-lg--line-height, 28px);
  --ds-upstream-text-body-lg--font-weight: var(--text-body-lg--font-weight, 400);
  --ds-upstream-text-body-md: var(--text-body-md, 14px);
  --ds-upstream-text-body-md--line-height: var(--text-body-md--line-height, 24px);
  --ds-upstream-text-body-md--font-weight: var(--text-body-md--font-weight, 400);
  --ds-upstream-text-display-hero: var(--text-display-hero, 40px);
  --ds-upstream-text-display-hero--line-height: var(--text-display-hero--line-height, 48px);
  --ds-upstream-text-display-hero--font-weight: var(--text-display-hero--font-weight, 600);
  --ds-upstream-text-eyebrow: var(--text-eyebrow, 12px);
  --ds-upstream-text-eyebrow--line-height: var(--text-eyebrow--line-height, 16px);
  --ds-upstream-text-eyebrow--font-weight: var(--text-eyebrow--font-weight, 600);
  --ds-upstream-text-headline-lg: var(--text-headline-lg, 32px);
  --ds-upstream-text-headline-lg--line-height: var(--text-headline-lg--line-height, 40px);
  --ds-upstream-text-headline-lg--font-weight: var(--text-headline-lg--font-weight, 600);
  --ds-upstream-text-headline-md: var(--text-headline-md, 24px);
  --ds-upstream-text-headline-md--line-height: var(--text-headline-md--line-height, 32px);
  --ds-upstream-text-headline-md--font-weight: var(--text-headline-md--font-weight, 500);
  --ds-upstream-text-headline-sm: var(--text-headline-sm, 18px);
  --ds-upstream-text-headline-sm--line-height: var(--text-headline-sm--line-height, 26px);
  --ds-upstream-text-headline-sm--font-weight: var(--text-headline-sm--font-weight, 500);
  --ds-upstream-text-label-nav: var(--text-label-nav, 13px);
  --ds-upstream-text-label-nav--line-height: var(--text-label-nav--line-height, 18px);
  --ds-upstream-text-label-nav--font-weight: var(--text-label-nav--font-weight, 500);
  --ds-upstream-text-price-lg: var(--text-price-lg, 18px);
  --ds-upstream-text-price-lg--line-height: var(--text-price-lg--line-height, 24px);
  --ds-upstream-text-price-lg--font-weight: var(--text-price-lg--font-weight, 700);
  --ds-upstream-text-price-strikethrough: var(--text-price-strikethrough, 14px);
  --ds-upstream-text-price-strikethrough--line-height: var(--text-price-strikethrough--line-height, 20px);
  --ds-upstream-text-price-strikethrough--font-weight: var(--text-price-strikethrough--font-weight, 400);
  --ds-upstream-text-title-card: var(--text-title-card, 16px);
  --ds-upstream-text-title-card--line-height: var(--text-title-card--line-height, 22px);
  --ds-upstream-text-title-card--font-weight: var(--text-title-card--font-weight, 500);
  --ds-upstream-text-2xl: var(--text-2xl, 1.5rem);
  --ds-upstream-text-2xl--line-height: var(--text-2xl--line-height, calc(2 / 1.5));
  --ds-upstream-text-lg: var(--text-lg, 1.125rem);
  --ds-upstream-text-lg--line-height: var(--text-lg--line-height, calc(1.75 / 1.125));
  --ds-upstream-text-sm: var(--text-sm, 0.875rem);
  --ds-upstream-text-sm--line-height: var(--text-sm--line-height, calc(1.25 / 0.875));
  --ds-upstream-text-xl: var(--text-xl, 1.25rem);
  --ds-upstream-text-xl--line-height: var(--text-xl--line-height, calc(1.75 / 1.25));
  --ds-upstream-text-xs: var(--text-xs, 0.75rem);
  --ds-upstream-text-xs--line-height: var(--text-xs--line-height, calc(1 / 0.75));
  --ds-upstream-font-weight-bold: var(--font-weight-bold, 700);
  --ds-upstream-font-weight-medium: var(--font-weight-medium, 500);
  --ds-upstream-font-weight-normal: var(--font-weight-normal, 400);
  --ds-upstream-font-weight-semibold: var(--font-weight-semibold, 600);
  --ds-upstream-tracking-tight: var(--tracking-tight, -0.025em);
  --ds-upstream-tracking-wider: var(--tracking-wider, 0.05em);
  --ds-upstream-tracking-widest: var(--tracking-widest, 0.1em);
  --ds-upstream-color-amber-600: var(--color-amber-600, oklch(66.6% 0.179 58.318));
  --ds-upstream-color-amber-700: var(--color-amber-700, oklch(55.5% 0.163 48.998));
  --ds-upstream-color-crimson-sale: var(--color-crimson-sale, #DC2626);
  --ds-upstream-color-error: var(--color-error, #ba1a1a);
  --ds-upstream-color-on-primary: var(--color-on-primary, #ffffff);
  --ds-upstream-color-on-primary-container: var(--color-on-primary-container, #868381);
  --ds-upstream-color-on-surface: var(--color-on-surface, #1a1c1c);
  --ds-upstream-color-on-surface-variant: var(--color-on-surface-variant, #4b4640);
  --ds-upstream-color-outline: var(--color-outline, #7c766f);
  --ds-upstream-color-purple-600: var(--color-purple-600, oklch(55.8% 0.288 302.321));
  --ds-upstream-color-surface-container-highest: var(--color-surface-container-highest, #e3e2e1);
  --ds-upstream-color-surface-variant: var(--color-surface-variant, #e3e2e1);
  --ds-upstream-color-tertiary-fixed: var(--color-tertiary-fixed, #eee0d3);
  --ds-upstream-color-white: var(--color-white, #fff);
  --ds-upstream-default-transition-timing-function: var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
  --ds-upstream-default-transition-duration: var(--default-transition-duration, 150ms);
  --ds-upstream-color-primary-container: var(--color-primary-container, #1d1b1a);
  --ds-upstream-text-3xl: var(--text-3xl, 1.875rem);
  --ds-upstream-text-3xl--line-height: var(--text-3xl--line-height, calc(2.25 / 1.875));
  --ds-upstream-text-base: var(--text-base, 1rem);
  --ds-upstream-text-base--line-height: var(--text-base--line-height, calc(1.5 / 1));

  /* Layer 2 — NAF Scents semantic aliases. Components must use these aliases. */
  --naf-size-scrollbar: var(--ds-size-scrollbar, 10px);
  --naf-size-scrollbar-compact: var(--ds-size-scrollbar-compact, 8px);
  --naf-color-canvas: var(--ds-color-canvas, #FFFFFF);
  --naf-color-white: var(--ds-color-white, #fff);
  --naf-color-black: var(--ds-color-black, #000);
  --naf-color-text: var(--ds-color-text, #1a1c1c);
  --naf-color-text-muted: var(--ds-color-text-muted, #5f5e5d);
  --naf-color-text-subtle: var(--ds-color-text-subtle, #605e5c);
  --naf-color-outline-text: var(--ds-color-outline-text, #706a64);
  --naf-color-outline: var(--ds-color-outline, #7c766f);
  --naf-color-border: var(--ds-color-border, #cdc5bd);
  --naf-color-page: var(--ds-color-page, #f4f3f2);
  --naf-color-surface: var(--ds-color-surface, #faf9f8);
  --naf-color-surface-control: var(--ds-color-surface-control, #efeeed);
  --naf-color-ink: var(--ds-color-ink, #000000);
  --naf-color-primary: var(--ds-color-primary, #000000);
  --naf-color-link: var(--ds-color-link, #000000);
  --naf-color-interactive-hover: var(--ds-color-interactive-hover, #efeeed);
  --naf-color-interactive-active: var(--ds-color-interactive-active, #e9e8e7);
  --naf-color-interactive-disabled: var(--ds-color-interactive-disabled, #605e5c);
  --naf-color-oud: var(--ds-color-oud, #2b2520);
  --naf-color-earth: var(--ds-color-earth, #3E362F);
  --naf-color-secondary: var(--ds-color-secondary, #545352);
  --naf-color-sand: var(--ds-color-sand, #A89C90);
  --naf-color-champagne: var(--ds-color-champagne, #d6c7b7);
  --naf-color-error: var(--ds-color-error, #DC2626);
  --naf-color-success: var(--ds-color-success, #16A34A);
  --naf-color-warning: var(--ds-color-warning, oklch(76.9% 0.188 70.08));
  --naf-color-transparent: var(--ds-color-transparent, transparent);
  --naf-color-scrollbar-thumb: var(--ds-color-scrollbar-thumb, #868381);
  --naf-color-focus: var(--naf-color-sand, #A89C90);
  --naf-color-border-20: var(--ds-color-outline-variant-20, color-mix(in srgb, #cdc5bd 20%, transparent));
  --naf-color-border-25: var(--ds-color-outline-variant-25, color-mix(in srgb, #cdc5bd 25%, transparent));
  --naf-color-border-30: var(--ds-color-outline-variant-30, color-mix(in srgb, #cdc5bd 30%, transparent));
  --naf-color-primary-20: var(--ds-color-primary-20, color-mix(in srgb, #000000 20%, transparent));
  --naf-color-warning-subtle: var(--ds-color-warning-subtle, color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent));
  --naf-color-overlay-60: var(--ds-color-black-60, color-mix(in srgb, #000 60%, transparent));
  --naf-color-overlay-80: var(--ds-color-black-80, color-mix(in srgb, #000 80%, transparent));
  --naf-color-canvas-90: var(--ds-color-canvas-90, color-mix(in srgb, #FFFFFF 90%, transparent));
  --naf-color-canvas-95: var(--ds-color-canvas-95, color-mix(in srgb, #FFFFFF 95%, transparent));
  --naf-color-success-subtle: var(--ds-color-success-subtle, color-mix(in srgb, #16A34A 10%, transparent));
  --naf-color-secondary-subtle: var(--ds-color-secondary-subtle, color-mix(in srgb, #5f5e5d 5%, transparent));
  --naf-color-current-muted: var(--ds-color-current-muted, color-mix(in oklab, currentColor 50%, transparent));

  --naf-space-0: var(--ds-space-0, 0);
  --naf-space-unit: var(--ds-space-unit, 0.25rem);
  --naf-space-1: var(--ds-space-1, 0.25rem);
  --naf-space-2: var(--ds-space-2, 0.5rem);
  --naf-space-3: var(--ds-space-3, 0.75rem);
  --naf-space-4: var(--ds-space-4, 1rem);
  --naf-space-5: var(--ds-space-5, 1.25rem);
  --naf-space-6: var(--ds-space-6, 1.5rem);
  --naf-space-8: var(--ds-space-8, 2rem);
  --naf-space-10: var(--ds-space-10, 2.5rem);
  --naf-space-12: var(--ds-space-12, 3rem);
  --naf-space-auto: var(--ds-space-auto, auto);
  --naf-space-negative-pixel: var(--ds-space-negative-pixel, -1px);
  --naf-space-negative-quarter-em: var(--ds-space-negative-quarter-em, -0.25em);
  --naf-space-negative-half-em: var(--ds-space-negative-half-em, -0.5em);
  --naf-space-auto-center: var(--ds-space-auto-center, 0 auto);
  --naf-space-scroll-offset: var(--ds-space-scroll-offset, 15rem);
  --naf-space-skip-link-x: var(--naf-space-4, 1rem);
  --naf-space-skip-link-y: var(--naf-space-3, 0.75rem);
  --naf-space-skip-link-padding: var(--ds-space-skip-link-padding, 0.7rem 1rem);
  --naf-space-search-offset: var(--ds-space-search-offset, 5.25rem 1rem auto 1rem);
  --naf-space-search-offset-mobile: var(--ds-space-search-offset-mobile, 5.1rem);
  --naf-space-search-row-gap: var(--naf-space-3, 0.75rem);
  --naf-space-search-input-padding: var(--ds-space-search-input-padding, 0.7rem 0.85rem);
  --naf-space-search-help-top: var(--ds-space-search-help-top, 0.55rem);

  --naf-font-body: var(--ds-font-body, Manrope, sans-serif);
  --naf-font-display: var(--ds-font-display, "Noto Serif", serif);
  --naf-font-arabic: var(--ds-font-arabic, "Noto Naskh Arabic", "Scheherazade New", "Amiri", serif);
  --naf-font-icons: var(--ds-font-icons, "Material Symbols Outlined");
  --naf-font-mono: var(--ds-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  --naf-font-inherit: var(--ds-font-inherit, inherit);
  --naf-font-size-inherit: var(--ds-font-size-inherit, inherit);
  --naf-font-size-relative-code: var(--ds-font-size-relative-code, 1em);
  --naf-font-size-relative-small: var(--ds-font-size-relative-small, 80%);
  --naf-font-size-relative-script: var(--ds-font-size-relative-script, 75%);
  --naf-font-size-10: var(--ds-font-size-10, 10px);
  --naf-font-size-11: var(--ds-font-size-11, 11px);
  --naf-font-size-12: var(--ds-font-size-12, 12px);
  --naf-font-size-13: var(--ds-font-size-13, 13px);
  --naf-font-size-14: var(--ds-font-size-14, 14px);
  --naf-font-size-16: var(--ds-font-size-16, 16px);
  --naf-font-size-18: var(--ds-font-size-18, 18px);
  --naf-font-size-20: var(--ds-font-size-20, 20px);
  --naf-font-size-22: var(--ds-font-size-22, 22px);
  --naf-font-size-24: var(--ds-font-size-24, 24px);
  --naf-font-size-44: var(--ds-font-size-44, 44px);
  --naf-font-size-xxs: var(--naf-font-size-10, 10px);
  --naf-font-size-xs: var(--naf-font-size-12, 12px);
  --naf-font-size-sm: var(--naf-font-size-14, 14px);
  --naf-font-size-base: var(--naf-font-size-16, 16px);
  --naf-font-size-lg: var(--naf-font-size-18, 18px);
  --naf-font-size-xl: var(--naf-font-size-20, 20px);
  --naf-font-size-2xl: var(--naf-font-size-24, 24px);
  --naf-font-size-display-hero: var(--naf-font-size-44, 44px);
  --naf-font-weight-inherit: var(--ds-font-weight-inherit, inherit);
  --naf-font-weight-bolder: var(--ds-font-weight-bolder, bolder);
  --naf-font-weight-normal: var(--ds-font-weight-normal, 400);
  --naf-font-weight-medium: var(--ds-font-weight-medium, 500);
  --naf-font-weight-semibold: var(--ds-font-weight-semibold, 600);
  --naf-font-weight-bold: var(--ds-font-weight-bold, 700);
  --naf-line-height-zero: var(--ds-line-height-zero, 0);
  --naf-line-height-tight: var(--ds-line-height-tight, 1.2);
  --naf-line-height-compact: var(--ds-line-height-compact, 1.3);
  --naf-line-height-body: var(--ds-line-height-body, 1.5);
  --naf-line-height-hero: var(--ds-line-height-hero, 52px);
  --naf-line-height-22: var(--ds-line-height-22, 22px);
  --naf-line-height-24: var(--ds-line-height-24, 24px);
  --naf-line-height-26: var(--ds-line-height-26, 26px);
  --naf-line-height-28: var(--ds-line-height-28, 28px);
  --naf-line-height-40: var(--ds-line-height-40, 40px);
  --naf-line-height-48: var(--ds-line-height-48, 48px);
  --naf-letter-spacing-wide: var(--ds-letter-spacing-wide, 0.3em);
  --naf-font-skip-link: var(--naf-font-weight-semibold) var(--naf-font-size-13)/var(--naf-line-height-tight) var(--naf-font-body);
  --naf-font-search-input: var(--naf-font-weight-medium) var(--naf-font-size-14)/var(--naf-line-height-compact) var(--naf-font-body);
  --naf-font-search-help: var(--naf-font-weight-normal) var(--naf-font-size-12)/var(--naf-line-height-body) var(--naf-font-body);

  --naf-radius-none: var(--ds-radius-none, 0);
  --naf-radius-control: var(--ds-radius-control, 0.25rem);
  --naf-radius-card: var(--ds-radius-card, 0.5rem);
  --naf-radius-panel: var(--ds-radius-panel, 1rem);
  --naf-radius-pill: var(--ds-radius-pill, 999px);
  --naf-shadow-search: var(--ds-shadow-search, 0 14px 40px rgba(0, 0, 0, 0.14));
  --naf-shadow-header-tight: var(--ds-shadow-header-tight, 0 -1px 6px rgba(0, 0, 0, 0.02));
  --naf-shadow-control: var(--ds-shadow-control, 0 1px 4px rgba(0, 0, 0, 0.04));
  --naf-shadow-header: var(--ds-shadow-header, 0 1px 8px rgba(0, 0, 0, 0.04));
  --naf-shadow-inset: var(--ds-shadow-inset, inset 0 2px 4px 0 rgb(0 0 0 / 0.05));
  --naf-shadow-sm: var(--ds-shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1));
  --naf-shadow-lg: var(--ds-shadow-lg, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
  --naf-shadow-xl: var(--ds-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));
  --naf-shadow-drop-xl: var(--ds-shadow-drop-xl, drop-shadow(0 9px 7px rgb(0 0 0 / 0.1)));
  --naf-ring-width: var(--ds-ring-width, 1px);
  --naf-z-content: var(--ds-z-content, 10);
  --naf-z-navigation: var(--ds-z-navigation, 40);
  --naf-z-header: var(--ds-z-header, 50);
  --naf-z-search: var(--ds-z-search, 80);
  --naf-z-skip-link: var(--ds-z-skip-link, 1000);
  --naf-duration-instant: var(--ds-duration-instant, 0.001ms);
  --naf-duration-fast: var(--ds-duration-fast, 150ms);
  --naf-duration-base: var(--ds-duration-base, 200ms);
  --naf-duration-medium: var(--ds-duration-medium, 300ms);
  --naf-duration-slow: var(--ds-duration-slow, 500ms);
  --naf-duration-slower: var(--ds-duration-slower, 700ms);
  --naf-easing-standard: var(--ds-easing-standard, ease);
  --naf-transition-none: var(--ds-transition-none, none);
  --naf-transition-color: var(--ds-transition-color, color 200ms ease);
  --naf-transition-opacity: var(--ds-transition-opacity, opacity 300ms ease);
  --naf-transition-shadow: var(--ds-transition-shadow, box-shadow 200ms ease);
  --naf-transition-transform: var(--ds-transition-transform, transform 200ms ease);
  /* Layer 2 aliases for audited utility values. */
  --naf-color-0b0a09-1: var(--ds-color-0b0a09-1, #000000);
  --naf-color-f6f5f4-2: var(--ds-color-f6f5f4-2, #F6F5F4);
  --naf-color-color-mix-in-srgb-oklch-76-9-0-188-70--3: var(--ds-color-color-mix-in-srgb-oklch-76-9-0-188-70--3, color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent));
  --naf-color-color-mix-in-srgb-16a34a-10-transparen-4: var(--ds-color-color-mix-in-srgb-16a34a-10-transparen-4, color-mix(in srgb, #16A34A 10%, transparent));
  --naf-color-d6c7b7-5: var(--ds-color-d6c7b7-5, #d6c7b7);
  --naf-color-1a1c1c-6: var(--ds-color-1a1c1c-6, #1a1c1c);
  --naf-color-605e5c-7: var(--ds-color-605e5c-7, #605e5c);
  --naf-color-0b0a09-8: var(--ds-color-0b0a09-8, #000000);
  /* Layer 2 aliases for upstream utility tokens. */
  --naf-upstream-container-2xl: var(--ds-upstream-container-2xl, 42rem);
  --naf-upstream-container-3xl: var(--ds-upstream-container-3xl, 48rem);
  --naf-upstream-container-7xl: var(--ds-upstream-container-7xl, 80rem);
  --naf-upstream-container-lg: var(--ds-upstream-container-lg, 32rem);
  --naf-upstream-container-md: var(--ds-upstream-container-md, 28rem);
  --naf-upstream-container-sm: var(--ds-upstream-container-sm, 24rem);
  --naf-upstream-container-xl: var(--ds-upstream-container-xl, 36rem);
  --naf-upstream-animate-pulse: var(--ds-upstream-animate-pulse, pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite);
  --naf-upstream-leading-relaxed: var(--ds-upstream-leading-relaxed, 1.625);
  --naf-upstream-leading-snug: var(--ds-upstream-leading-snug, 1.375);
  --naf-upstream-drop-shadow-xl: var(--ds-upstream-drop-shadow-xl, 0 9px 7px rgb(0 0 0 / 0.1));
  --naf-upstream-blur-md: var(--ds-upstream-blur-md, 12px);
  /* Layer 2 semantic aliases for upstream utility tokens. */
  --naf-upstream-font-sans: var(--ds-upstream-font-sans, initial);
  --naf-upstream-font-mono: var(--ds-upstream-font-mono, initial);
  --naf-upstream-default-font-family: var(--ds-upstream-default-font-family, var(--naf-upstream-font-sans));
  --naf-upstream-default-font-feature-settings: var(--ds-upstream-default-font-feature-settings, initial);
  --naf-upstream-default-font-variation-settings: var(--ds-upstream-default-font-variation-settings, initial);
  --naf-upstream-default-mono-font-family: var(--ds-upstream-default-mono-font-family, var(--naf-upstream-font-mono));
  --naf-upstream-default-mono-font-feature-settings: var(--ds-upstream-default-mono-font-feature-settings, initial);
  --naf-upstream-default-mono-font-variation-settings: var(--ds-upstream-default-mono-font-variation-settings, initial);
  --naf-upstream-color-surface-container-high: var(--ds-upstream-color-surface-container-high, #e9e8e7);
  --naf-upstream-radius-2xl: var(--ds-upstream-radius-2xl, 1rem);
  --naf-upstream-radius-full: var(--ds-upstream-radius-full, .75rem);
  --naf-upstream-radius-lg: var(--ds-upstream-radius-lg, .25rem);
  --naf-upstream-radius-xl: var(--ds-upstream-radius-xl, .5rem);
  --naf-upstream-color-outline-variant: var(--ds-upstream-color-outline-variant, #cdc5bd);
  --naf-upstream-color-primary: var(--ds-upstream-color-primary, #000000);
  --naf-upstream-color-amber-500: var(--ds-upstream-color-amber-500, oklch(76.9% 0.188 70.08));
  --naf-upstream-color-black: var(--ds-upstream-color-black, #000);
  --naf-upstream-color-canvas-white: var(--ds-upstream-color-canvas-white, #FFFFFF);
  --naf-upstream-color-emerald-origin: var(--ds-upstream-color-emerald-origin, #16A34A);
  --naf-upstream-color-secondary: var(--ds-upstream-color-secondary, #5f5e5d);
  --naf-upstream-color-surface: var(--ds-upstream-color-surface, #faf9f8);
  --naf-upstream-color-surface-container: var(--ds-upstream-color-surface-container, #efeeed);
  --naf-upstream-color-surface-container-low: var(--ds-upstream-color-surface-container-low, #f4f3f2);
  --naf-upstream-color-surface-container-lowest: var(--ds-upstream-color-surface-container-lowest, #ffffff);
  --naf-upstream-color-red-400: var(--ds-upstream-color-red-400, oklch(70.4% 0.191 22.216));
  --naf-upstream-color-blue-400: var(--ds-upstream-color-blue-400, oklch(70.7% 0.165 254.624));
  --naf-upstream-font-body-lg: var(--ds-upstream-font-body-lg, Manrope, sans-serif);
  --naf-upstream-font-body-md: var(--ds-upstream-font-body-md, Manrope, sans-serif);
  --naf-upstream-font-display-hero: var(--ds-upstream-font-display-hero, "Noto Serif", sans-serif);
  --naf-upstream-font-eyebrow: var(--ds-upstream-font-eyebrow, Manrope, sans-serif);
  --naf-upstream-font-headline-lg: var(--ds-upstream-font-headline-lg, "Noto Serif", sans-serif);
  --naf-upstream-font-headline-md: var(--ds-upstream-font-headline-md, "Noto Serif", sans-serif);
  --naf-upstream-font-headline-sm: var(--ds-upstream-font-headline-sm, "Noto Serif", sans-serif);
  --naf-upstream-font-label-nav: var(--ds-upstream-font-label-nav, Manrope, sans-serif);
  --naf-upstream-font-price-lg: var(--ds-upstream-font-price-lg, Manrope, sans-serif);
  --naf-upstream-font-price-strikethrough: var(--ds-upstream-font-price-strikethrough, Manrope, sans-serif);
  --naf-upstream-font-serif: var(--ds-upstream-font-serif, ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif);
  --naf-upstream-font-title-card: var(--ds-upstream-font-title-card, "Noto Serif", sans-serif);
  --naf-upstream-text-body-lg: var(--ds-upstream-text-body-lg, 16px);
  --naf-upstream-text-body-lg--line-height: var(--ds-upstream-text-body-lg--line-height, 28px);
  --naf-upstream-text-body-lg--font-weight: var(--ds-upstream-text-body-lg--font-weight, 400);
  --naf-upstream-text-body-md: var(--ds-upstream-text-body-md, 14px);
  --naf-upstream-text-body-md--line-height: var(--ds-upstream-text-body-md--line-height, 24px);
  --naf-upstream-text-body-md--font-weight: var(--ds-upstream-text-body-md--font-weight, 400);
  --naf-upstream-text-display-hero: var(--ds-upstream-text-display-hero, 40px);
  --naf-upstream-text-display-hero--line-height: var(--ds-upstream-text-display-hero--line-height, 48px);
  --naf-upstream-text-display-hero--font-weight: var(--ds-upstream-text-display-hero--font-weight, 600);
  --naf-upstream-text-eyebrow: var(--ds-upstream-text-eyebrow, 12px);
  --naf-upstream-text-eyebrow--line-height: var(--ds-upstream-text-eyebrow--line-height, 16px);
  --naf-upstream-text-eyebrow--font-weight: var(--ds-upstream-text-eyebrow--font-weight, 600);
  --naf-upstream-text-headline-lg: var(--ds-upstream-text-headline-lg, 32px);
  --naf-upstream-text-headline-lg--line-height: var(--ds-upstream-text-headline-lg--line-height, 40px);
  --naf-upstream-text-headline-lg--font-weight: var(--ds-upstream-text-headline-lg--font-weight, 600);
  --naf-upstream-text-headline-md: var(--ds-upstream-text-headline-md, 24px);
  --naf-upstream-text-headline-md--line-height: var(--ds-upstream-text-headline-md--line-height, 32px);
  --naf-upstream-text-headline-md--font-weight: var(--ds-upstream-text-headline-md--font-weight, 500);
  --naf-upstream-text-headline-sm: var(--ds-upstream-text-headline-sm, 18px);
  --naf-upstream-text-headline-sm--line-height: var(--ds-upstream-text-headline-sm--line-height, 26px);
  --naf-upstream-text-headline-sm--font-weight: var(--ds-upstream-text-headline-sm--font-weight, 500);
  --naf-upstream-text-label-nav: var(--ds-upstream-text-label-nav, 13px);
  --naf-upstream-text-label-nav--line-height: var(--ds-upstream-text-label-nav--line-height, 18px);
  --naf-upstream-text-label-nav--font-weight: var(--ds-upstream-text-label-nav--font-weight, 500);
  --naf-upstream-text-price-lg: var(--ds-upstream-text-price-lg, 18px);
  --naf-upstream-text-price-lg--line-height: var(--ds-upstream-text-price-lg--line-height, 24px);
  --naf-upstream-text-price-lg--font-weight: var(--ds-upstream-text-price-lg--font-weight, 700);
  --naf-upstream-text-price-strikethrough: var(--ds-upstream-text-price-strikethrough, 14px);
  --naf-upstream-text-price-strikethrough--line-height: var(--ds-upstream-text-price-strikethrough--line-height, 20px);
  --naf-upstream-text-price-strikethrough--font-weight: var(--ds-upstream-text-price-strikethrough--font-weight, 400);
  --naf-upstream-text-title-card: var(--ds-upstream-text-title-card, 16px);
  --naf-upstream-text-title-card--line-height: var(--ds-upstream-text-title-card--line-height, 22px);
  --naf-upstream-text-title-card--font-weight: var(--ds-upstream-text-title-card--font-weight, 500);
  --naf-upstream-text-2xl: var(--ds-upstream-text-2xl, 1.5rem);
  --naf-upstream-text-2xl--line-height: var(--ds-upstream-text-2xl--line-height, calc(2 / 1.5));
  --naf-upstream-text-lg: var(--ds-upstream-text-lg, 1.125rem);
  --naf-upstream-text-lg--line-height: var(--ds-upstream-text-lg--line-height, calc(1.75 / 1.125));
  --naf-upstream-text-sm: var(--ds-upstream-text-sm, 0.875rem);
  --naf-upstream-text-sm--line-height: var(--ds-upstream-text-sm--line-height, calc(1.25 / 0.875));
  --naf-upstream-text-xl: var(--ds-upstream-text-xl, 1.25rem);
  --naf-upstream-text-xl--line-height: var(--ds-upstream-text-xl--line-height, calc(1.75 / 1.25));
  --naf-upstream-text-xs: var(--ds-upstream-text-xs, 0.75rem);
  --naf-upstream-text-xs--line-height: var(--ds-upstream-text-xs--line-height, calc(1 / 0.75));
  --naf-upstream-font-weight-bold: var(--ds-upstream-font-weight-bold, 700);
  --naf-upstream-font-weight-medium: var(--ds-upstream-font-weight-medium, 500);
  --naf-upstream-font-weight-normal: var(--ds-upstream-font-weight-normal, 400);
  --naf-upstream-font-weight-semibold: var(--ds-upstream-font-weight-semibold, 600);
  --naf-upstream-tracking-tight: var(--ds-upstream-tracking-tight, -0.025em);
  --naf-upstream-tracking-wider: var(--ds-upstream-tracking-wider, 0.05em);
  --naf-upstream-tracking-widest: var(--ds-upstream-tracking-widest, 0.1em);
  --naf-upstream-color-amber-600: var(--ds-upstream-color-amber-600, oklch(66.6% 0.179 58.318));
  --naf-upstream-color-amber-700: var(--ds-upstream-color-amber-700, oklch(55.5% 0.163 48.998));
  --naf-upstream-color-crimson-sale: var(--ds-upstream-color-crimson-sale, #DC2626);
  --naf-upstream-color-error: var(--ds-upstream-color-error, #ba1a1a);
  --naf-upstream-color-on-primary: var(--ds-upstream-color-on-primary, #ffffff);
  --naf-upstream-color-on-primary-container: var(--ds-upstream-color-on-primary-container, #868381);
  --naf-upstream-color-on-surface: var(--ds-upstream-color-on-surface, #1a1c1c);
  --naf-upstream-color-on-surface-variant: var(--ds-upstream-color-on-surface-variant, #4b4640);
  --naf-upstream-color-outline: var(--ds-upstream-color-outline, #7c766f);
  --naf-upstream-color-purple-600: var(--ds-upstream-color-purple-600, oklch(55.8% 0.288 302.321));
  --naf-upstream-color-surface-container-highest: var(--ds-upstream-color-surface-container-highest, #e3e2e1);
  --naf-upstream-color-surface-variant: var(--ds-upstream-color-surface-variant, #e3e2e1);
  --naf-upstream-color-tertiary-fixed: var(--ds-upstream-color-tertiary-fixed, #eee0d3);
  --naf-upstream-color-white: var(--ds-upstream-color-white, #fff);
  --naf-upstream-default-transition-timing-function: var(--ds-upstream-default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
  --naf-upstream-default-transition-duration: var(--ds-upstream-default-transition-duration, 150ms);
  --naf-upstream-color-primary-container: var(--ds-upstream-color-primary-container, #1d1b1a);
  --naf-upstream-text-3xl: var(--ds-upstream-text-3xl, 1.875rem);
  --naf-upstream-text-3xl--line-height: var(--ds-upstream-text-3xl--line-height, calc(2.25 / 1.875));
  --naf-upstream-text-base: var(--ds-upstream-text-base, 1rem);
  --naf-upstream-text-base--line-height: var(--ds-upstream-text-base--line-height, calc(1.5 / 1));
}