/* =========================================================
   Primitive design tokens — raw values are owned only here
   ========================================================= */
:root {
  /* Primitive palette: raw values live only in this layer. */
  --ds-color-blue-500: #1f4f7a;
  --ds-color-blue-300: #83b9e8;
  --ds-color-slate-950: #0d1822;
  --ds-color-slate-900: #142536;
  --ds-color-slate-800: #20384d;
  --ds-color-stone-100: #edf0ed;
  --ds-color-copper-500: #bd6b31;
  --ds-color-neutral-0: #fff;
  --ds-color-neutral-50: #f5f5f1;
  --ds-color-neutral-800: #182937;
  --ds-color-neutral-900: #0d1822;
  --ds-color-ink: #142536;
  --ds-color-ink-inverse: #f2f5fb;
  --ds-color-border-light: #d8ddd9;
  --ds-color-border-dark: #385063;
  --ds-color-muted-dark: #b8c5d3;
  --ds-color-success: #238a45;
  --ds-color-warning: #b77900;
  --ds-color-danger: #bf3543;
  --ds-color-teal-500: #176d67;
  --ds-color-amber-500: #bd6b31;
  --ds-color-burgundy-700: #82434e;
  --ds-color-burgundy-300: #e3a3aa;
  --ds-color-info: #1769aa;

  /* Theme variants are token values, not component-owned palettes. */
  --ds-theme-light-surface: var(--ds-color-neutral-0);
  --ds-theme-light-text: var(--ds-color-ink);
  --ds-theme-light-muted: #536a7d;
  --ds-theme-light-border: var(--ds-color-border-light);
  --ds-theme-light-primary: var(--ds-color-blue-500);
  --ds-theme-dark-surface: var(--ds-color-neutral-800);
  --ds-theme-dark-text: var(--ds-color-ink-inverse);
  --ds-theme-dark-muted: var(--ds-color-muted-dark);
  --ds-theme-dark-border: var(--ds-color-border-dark);
  --ds-theme-dark-primary: var(--ds-color-blue-300);

  /* =========================================================
     Semantic tokens — runtime providers replace intent, not components
     ========================================================= */
  --ds-color-background: var(--ds-color-neutral-50);
  --ds-color-surface: var(--ds-color-neutral-0);
  --ds-color-text: var(--ds-color-ink);
  --ds-color-text-strong: var(--ds-color-text);
  --ds-color-surface-recessed: var(--ds-color-surface);
  --ds-color-border-subtle: color-mix(in srgb, var(--ds-color-border) 70%, var(--ds-color-surface));
  --ds-color-text-muted: var(--ds-theme-light-muted);
  --ds-color-border: var(--ds-color-border-light);
  --ds-color-primary: var(--ds-color-blue-500);
  --ds-color-primary-hover: #2548b3;
  --ds-color-on-primary: var(--ds-color-neutral-0);
  --ds-color-success-semantic: var(--ds-color-success);
  --ds-color-warning-semantic: var(--ds-color-warning);
  --ds-color-danger-semantic: var(--ds-color-danger);
  --ds-color-info-semantic: var(--ds-color-info);
  --ds-color-secondary: var(--ds-color-teal-500);
  --ds-accent-active-light: #c87935;
  --ds-accent-active-dark: #ffbd66;
  --ds-color-accent: var(--ds-accent-active-light);
  --ds-color-surface-raised: var(--ds-color-neutral-0);
  --ds-color-surface-subtle: #f3f5f3;
  --ds-color-surface-strong: #e3e8e6;
  --ds-color-surface-overlay: rgb(255 255 255 / .82);
  --ds-color-surface-interactive: var(--ds-color-surface-subtle);
  --ds-color-on-surface: var(--ds-color-ink);
  --ds-color-on-accent: #251a12;
  --ds-color-header-background: var(--ds-color-surface);
  --ds-color-header-text: var(--ds-color-text);
  --ds-color-nav-hover: var(--ds-color-surface-interactive);
  --ds-color-nav-active: var(--ds-color-surface-strong);
  --ds-color-icon: var(--ds-color-text);
  --ds-color-icon-muted: var(--ds-color-text-muted);
  /* Typography ownership: host supplies existing licensed assets; features consume roles. */
  --ds-font-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif;
  --ds-font-body: "IRANSans FaNum", var(--ds-font-fallback);
  --ds-font-display: "Estedad", var(--ds-font-fallback);
  --ds-font-numeric: var(--ds-font-body);
  --ds-font-technical: var(--ds-font-fallback);
  --ds-font-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  --ds-font-sans: var(--ds-font-body);
  --ds-font-ui: var(--ds-font-body);
  --ds-font-meta: var(--ds-font-body);
  --ds-font-label: var(--ds-font-body);
  --ds-font-heading: var(--ds-font-body);
  --ds-font-button: var(--ds-font-ui);
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-strong: 700;
  --ds-weight-heavy: 900;
  --ds-text-2xs: .8125rem;
  --ds-text-xs: .875rem;
  --ds-text-sm: 1rem;
  --ds-text-md: 1.0625rem;
  --ds-text-lg: 1.25rem;
  --ds-text-xl: clamp(1.8rem, 3vw, 3.25rem);
  --ds-text-2xl: clamp(2.5rem, 5.2vw, 5.5rem);
  --ds-type-body-size: var(--ds-text-sm);
  --ds-type-body-emphasis-size: clamp(1rem, .4vw + .92rem, 1.125rem);
  --ds-type-body-weight: 400;
  --ds-type-body-line-height: 1.85;
  --ds-type-meta-size: var(--ds-text-2xs);
  --ds-type-meta-weight: 500;
  --ds-type-meta-line-height: 1.65;
  --ds-type-label-size: clamp(.875rem, .35vw + .8rem, 1rem);
  --ds-type-label-weight: 600;
  --ds-type-label-line-height: 1.5;
  --ds-type-heading-size: var(--ds-text-xl);
  --ds-type-heading-weight: 700;
  --ds-type-heading-line-height: 1.35;
  --ds-type-display-size: clamp(2rem, 3.6vw, 3.75rem);
  --ds-type-display-mobile-size: clamp(2rem, 8vw, 2.25rem);
  --ds-type-display-weight: 700;
  --ds-type-display-line-height: 1.25;
  --ds-type-button-size: clamp(.9375rem, .25vw + .9rem, 1rem);
  --ds-type-button-weight: 600;
  --ds-type-button-line-height: 1.5;
  --ds-space-1: .25rem;
  --ds-space-2: .5rem;
  --ds-space-3: .75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-space-12: 3rem;
  --ds-radius-xs: .5rem;
  --ds-radius-sm: .75rem;
  --ds-radius-md: 1.125rem;
  --ds-radius-lg: 1.75rem;
  --ds-radius-xl: 2.5rem;
  --ds-radius-control: var(--ds-radius-sm);
  --ds-radius-card: .625rem;
  --ds-radius-media: .875rem;
  --ds-radius-overlay: 1.125rem;
  --ds-duration-fast: 160ms;
  --ds-duration-normal: 240ms;
  --ds-duration-emphasis: 380ms;
  --ds-ease-standard: cubic-bezier(.2, .7, .2, 1);
  --ds-ease-enter: cubic-bezier(.16, 1, .3, 1);
  /* Hierarchical reactive glow: semantic accent is the only color source. */
  --ds-glow-radius-sm: var(--ds-radius-sm);
  --ds-glow-radius-md: var(--ds-radius-md);
  --ds-glow-radius-lg: var(--ds-radius-lg);
  --ds-glow-border-width: 1px;
  --ds-glow-border-idle-opacity: .08;
  --ds-glow-border-hover-opacity: .62;
  --ds-glow-border-active-opacity: .78;
  --ds-glow-size: 11rem;
  --ds-glow-blur-radius: 0px;
  --ds-glow-idle-intensity: 0;
  --ds-glow-hover-intensity: .42;
  --ds-glow-focus-intensity: .56;
  --ds-glow-active-intensity: .66;
  --ds-glow-spotlight-idle-opacity: 0;
  --ds-glow-spotlight-hover-opacity: .045;
  --ds-glow-spotlight-active-opacity: .075;
  --ds-glow-beam-duration: 8s;
  --ds-glow-beam-core-width: 16%;
  --ds-glow-beam-core-thickness: 2px;
  --ds-glow-beam-opacity: .72;
  --ds-glow-beam-delay: 0s;
  --ds-glow-bloom-size: 8px;
  --ds-glow-bloom-opacity: .56;
  --ds-glow-bloom-hover-boost: .12;
  --ds-glow-inner-opacity: .04;
  --ds-glow-static-bloom-opacity: .14;
  --ds-glow-value-beam-duration: 8s;
  --ds-glow-value-beam-opacity: .84;
  --ds-glow-value-bloom-size: 6px;
  --ds-glow-value-bloom-opacity: .62;
  --ds-glow-value-inner-opacity: .08;
  --ds-glow-value-static-bloom-opacity: .22;
  --ds-glow-active-beam-duration: 7s;
  --ds-glow-active-beam-opacity: .96;
  --ds-glow-active-bloom-size: 8px;
  --ds-glow-active-bloom-opacity: .78;
  --ds-glow-active-inner-opacity: .14;
  --ds-glow-active-static-bloom-opacity: .32;
  --ds-glow-enter-duration: 240ms;
  --ds-glow-exit-duration: 180ms;
  --ds-glow-active-transition-duration: 420ms;
  --ds-glow-light-multiplier: .68;
  --ds-glow-dark-multiplier: 1;
  --ds-glow-spotlight-light-multiplier: .55;
  --ds-glow-spotlight-dark-multiplier: 1;
  --ds-glow-theme-multiplier: var(--ds-glow-light-multiplier);
  --ds-glow-spotlight-theme-multiplier: var(--ds-glow-spotlight-light-multiplier);
  --ds-glow-current-hover-opacity: .29;
  --ds-glow-current-focus-opacity: .38;
  --ds-glow-current-active-opacity: .45;
  --ds-glow-current-spotlight-hover-opacity: .025;
  --ds-glow-current-spotlight-active-opacity: .04;
  --ds-shadow-resting: 0 1px 2px rgb(13 24 34 / .04), 0 10px 24px rgb(13 24 34 / .05);
  --ds-shadow-card-hover: 0 1.25rem 2.8rem rgb(13 38 55 / .12), 0 2px 4px rgb(13 24 34 / .05);
  --ds-shadow-overlay: 0 1.5rem 4rem rgb(0 0 0 / .28);
  --ds-shadow-elevated: 0 1.5rem 3.6rem rgb(13 38 55 / .16), 0 2px 4px rgb(13 24 34 / .06);
  --ds-container-max: 85rem;
  --ds-container-wide: 95rem;
  --ds-container-reading: 78rem;
  --ds-page-gutter: clamp(1rem, 2.2vw, 2.5rem);
  --ds-touch-target: 44px;
  --ds-z-overlay: 20;
  --ds-z-navigation: 10;
  --ds-z-modal: 80;

  /* Signature interaction aliases — Kinetic Material. */
  --ds-kinetic-cyan: #7cccec;
  --ds-kinetic-copper: #d28a49;
  --ds-kinetic-navy-1: #194b70;
  --ds-kinetic-navy-2: #0e304a;
  --ds-kinetic-ink: #0b1f30;
  --ds-kinetic-surface: #f7fafb;
  --ds-kinetic-border: #d8e2e7;
  --ds-kinetic-glow-soft: 0 0 0 1px rgb(124 204 236 / .76), 0 0 0 4px rgb(124 204 236 / .16);
  --ds-kinetic-shadow-raised: 0 12px 28px rgb(13 38 55 / .1), 0 2px 6px rgb(13 24 34 / .04);
  --ds-kinetic-shadow-inset: inset 0 3px 8px rgb(23 63 91 / .09), inset 0 -1px 0 rgb(255 255 255 / .9);
  /* Component aliases keep storefront features token-driven. */
  --sf-button-background: var(--ds-color-primary);
  --sf-button-text: var(--ds-color-on-primary);
  --sf-card-background: var(--ds-color-surface-raised);
  --sf-card-border: var(--ds-color-border);
  --sf-nav-background: var(--ds-color-surface-overlay);
  --sf-nav-active: var(--ds-color-primary);
  --sf-mspyar-accent: var(--ds-color-accent);
  --sf-product-image-radius: var(--ds-radius-md);
  --sf-drawer-width: 29rem;
}

/* =========================================================
   vNext typography foundation — family ownership stays tokenized
   ========================================================= */
:where(html) {
  font-family: var(--ds-font-body);
}

:where(body) {
  margin: 0;
  font-family: var(--ds-font-body);
  font-size: var(--ds-type-body-size);
  font-weight: var(--ds-type-body-weight);
  line-height: var(--ds-type-body-line-height);
  background: var(--ds-color-background);
  color: var(--ds-color-text);
}

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--ds-font-heading);
}

:where(button, input, select, textarea) {
  font-family: inherit;
}

/* =========================================================
   Theme overrides — explicit lab modes must override OS preference
   ========================================================= */
:root[data-theme="dark"],
.sf-lab[data-theme="dark"] {
  color-scheme: dark;
  --ds-color-background: var(--ds-color-neutral-900);
  --ds-color-surface: var(--ds-color-neutral-800);
  --ds-color-text: var(--ds-color-ink-inverse);
  --ds-color-text-muted: #b8c5d3;
  --ds-color-border: var(--ds-color-border-dark);
  --ds-color-primary: var(--ds-color-blue-300);
  --ds-color-on-primary: #0b1830;
  --ds-color-secondary: #65c9c0;
  --ds-color-accent: var(--ds-accent-active-dark);
  --ds-color-surface-raised: #222d40;
  --ds-color-surface-subtle: #1d2a3a;
  --ds-color-surface-strong: #314154;
  --ds-color-surface-overlay: rgb(34 45 64 / .88);
  --ds-color-on-surface: var(--ds-color-ink-inverse);
  --ds-glow-theme-multiplier: var(--ds-glow-dark-multiplier);
  --ds-glow-spotlight-theme-multiplier: var(--ds-glow-spotlight-dark-multiplier);
  --ds-glow-current-hover-opacity: var(--ds-glow-hover-intensity);
  --ds-glow-current-focus-opacity: var(--ds-glow-focus-intensity);
  --ds-glow-current-active-opacity: var(--ds-glow-active-intensity);
  --ds-glow-current-spotlight-hover-opacity: var(--ds-glow-spotlight-hover-opacity);
  --ds-glow-current-spotlight-active-opacity: var(--ds-glow-spotlight-active-opacity);
  --ds-glow-value-beam-opacity: .96;
  --ds-glow-value-bloom-opacity: .78;
  --ds-glow-value-inner-opacity: .12;
  --ds-glow-value-static-bloom-opacity: .3;
  --ds-glow-active-beam-opacity: 1;
  --ds-glow-active-bloom-opacity: .96;
  --ds-glow-active-inner-opacity: .19;
  --ds-glow-active-static-bloom-opacity: .42;
}

:root[data-theme="light"],
.sf-lab[data-theme="light"] {
  color-scheme: light;
  --ds-color-background: var(--ds-color-neutral-50);
  --ds-color-surface: var(--ds-color-neutral-0);
  --ds-color-text: var(--ds-color-ink);
  --ds-color-text-muted: var(--ds-theme-light-muted);
  --ds-color-border: var(--ds-color-border-light);
  --ds-color-primary: var(--ds-color-blue-500);
  --ds-color-secondary: var(--ds-color-teal-500);
  --ds-color-accent: var(--ds-accent-active-light);
  --ds-color-surface-raised: var(--ds-color-neutral-0);
  --ds-color-surface-subtle: #f3f5f3;
  --ds-color-surface-strong: #e3e8e6;
  --ds-color-surface-overlay: rgb(255 255 255 / .82);
  --ds-color-on-surface: var(--ds-color-ink);
  --ds-glow-theme-multiplier: var(--ds-glow-light-multiplier);
  --ds-glow-spotlight-theme-multiplier: var(--ds-glow-spotlight-light-multiplier);
  --ds-glow-current-hover-opacity: .29;
  --ds-glow-current-focus-opacity: .38;
  --ds-glow-current-active-opacity: .45;
  --ds-glow-current-spotlight-hover-opacity: .025;
  --ds-glow-current-spotlight-active-opacity: .04;
  --ds-glow-value-beam-opacity: .84;
  --ds-glow-value-bloom-opacity: .62;
  --ds-glow-value-inner-opacity: .08;
  --ds-glow-value-static-bloom-opacity: .22;
  --ds-glow-active-beam-opacity: .96;
  --ds-glow-active-bloom-opacity: .78;
  --ds-glow-active-inner-opacity: .14;
  --ds-glow-active-static-bloom-opacity: .32;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ds-color-background: var(--ds-color-neutral-900);
    --ds-color-surface: var(--ds-color-neutral-800);
    --ds-color-text: var(--ds-color-ink-inverse);
    --ds-color-text-muted: #b8c5d3;
    --ds-color-border: var(--ds-color-border-dark);
    --ds-color-primary: var(--ds-color-blue-300);
    --ds-color-on-primary: #0b1830;
    --ds-color-secondary: #65c9c0;
    --ds-color-accent: var(--ds-accent-active-dark);
    --ds-color-surface-raised: #222d40;
    --ds-color-surface-subtle: #1d2a3a;
    --ds-color-surface-strong: #314154;
    --ds-color-surface-overlay: rgb(34 45 64 / .88);
    --ds-color-on-surface: var(--ds-color-ink-inverse);
    --ds-glow-theme-multiplier: var(--ds-glow-dark-multiplier);
    --ds-glow-spotlight-theme-multiplier: var(--ds-glow-spotlight-dark-multiplier);
    --ds-glow-current-hover-opacity: var(--ds-glow-hover-intensity);
    --ds-glow-current-focus-opacity: var(--ds-glow-focus-intensity);
    --ds-glow-current-active-opacity: var(--ds-glow-active-intensity);
    --ds-glow-current-spotlight-hover-opacity: var(--ds-glow-spotlight-hover-opacity);
    --ds-glow-current-spotlight-active-opacity: var(--ds-glow-spotlight-active-opacity);
    --ds-glow-value-beam-opacity: .96;
    --ds-glow-value-bloom-opacity: .78;
    --ds-glow-value-inner-opacity: .12;
    --ds-glow-value-static-bloom-opacity: .3;
    --ds-glow-active-beam-opacity: 1;
    --ds-glow-active-bloom-opacity: .96;
    --ds-glow-active-inner-opacity: .19;
    --ds-glow-active-static-bloom-opacity: .42;
    color-scheme: dark;
  }
}


/* =========================================================
   V7 — Storefront appearance accents.
   The edge rail changes only semantic accent intent; components remain
   token-driven and no business state depends on this preference.
   ========================================================= */
:root[data-accent="copper"] {
  --ds-accent-active-light: #c87935;
  --ds-accent-active-dark: #ffbd66;
  --ds-kinetic-copper: #d18a49;
}

:root[data-accent="cyan"] {
  --ds-accent-active-light: #287da8;
  --ds-accent-active-dark: #73c9eb;
  --ds-kinetic-cyan: #62b7d8;
}

:root[data-accent="teal"] {
  --ds-accent-active-light: #24776c;
  --ds-accent-active-dark: #6bd0c2;
  --ds-kinetic-cyan: #63bdb2;
}

/* Reference-extracted controls: AuthSpecimen field/submit/secondary + ProductCard V2 material.
   Values preserve the existing sources; light-dark follows the established color-scheme owner. */
:root {
  --ds-control-radius: .8125rem;
  --ds-control-surface: light-dark(#eeeff3, #2d343f);
  --ds-control-highlight: light-dark(#f7f8fa, #3a424f);
  --ds-control-low: light-dark(#d2d6e0, #20252d);
  --ds-control-ink: light-dark(#34373e, #f1f4f8);
  --ds-control-muted: light-dark(#7d8798, #a8b1bf);
  --ds-control-accent: light-dark(#06a6fa, #19adfa);
  --ds-control-label-ink: light-dark(#158cfa, #329bff);
  --ds-control-label-cutout: light-dark(#edf2f7, #2d3541);
  --ds-control-error: light-dark(#a95750, #efaaa3);
  --ds-control-success: light-dark(#287b55, #83d5aa);
  --ds-control-field-surface: linear-gradient(145deg, light-dark(#e8edf4, #252b35), light-dark(#f4f7fa, #252b35));
  --ds-control-field-shadow: inset 8px 8px 14px rgb(169 181 197 / .68), inset -8px -8px 15px rgb(255 255 255 / .96);
  --ds-control-recessed-shadow: inset 6px 6px 12px rgb(151 163 183 / .38), inset -6px -6px 12px rgb(255 255 255 / .96), 0 1px 2px rgb(120 130 150 / .08);
  --ds-control-action-ink: light-dark(#17628f, #b9ddf5);
  --ds-control-action-surface: linear-gradient(145deg, var(--ds-control-highlight), var(--ds-control-surface));
  --ds-control-action-shadow: -7px -7px 14px rgb(255 255 255 / 1), 8px 10px 19px rgb(133 148 170 / .38), inset 2px 2px 2px rgb(255 255 255 / .96), inset -2px -2px 3px rgb(148 162 183 / .18);
  --ds-control-secondary-shadow: -5px -5px 11px rgb(255 255 255 / .8), 6px 7px 13px rgb(137 150 170 / .28);
  --ds-control-action-gradient: linear-gradient(105deg, #25dff5, #327fff 34%, #765dfc 67%, #af59f3);
  --ds-control-action-hover-shadow: 0 10px 20px rgb(6 166 250 / .24), inset 0 2px 1px rgb(255 255 255 / .46), inset 0 -2px 2px rgb(17 102 183 / .22);
  --ds-control-action-pressed-shadow: inset 3px 3px 7px rgb(57 76 102 / .24), inset -2px -2px 6px rgb(255 255 255 / .24);
  --ds-control-focus-light: inset 0 2px 1px rgb(255 255 255 / .46);
  --ds-control-shine: rgb(255 255 255 / .6);
  --ds-control-trace-cyan: #22e6ff;
  --ds-control-trace-white: #fff;
  --ds-control-trace-blue: #3c78ff;
  --ds-control-trace-violet: #a65cff;
  --ds-control-icon-light: light-dark(rgb(255 255 255 / .94), rgb(255 255 255 / .1));
  --ds-control-icon-depth: light-dark(rgb(128 145 166 / .34), rgb(0 0 0 / .45));
}
:root[data-theme="dark"], .sf-lab[data-theme="dark"] {
  --ds-control-action-surface: transparent;
  --ds-control-field-shadow: inset 3px 3px 7px rgb(5 8 12 / .48), inset -3px -3px 7px rgb(75 85 101 / .28), 0 1px 2px rgb(0 0 0 / .14);
  --ds-control-recessed-shadow: var(--ds-control-field-shadow);
  --ds-control-action-shadow: -6px -6px 13px rgb(80 91 108 / .25), 8px 10px 20px rgb(3 6 10 / .42), inset 1px 1px 1px rgb(255 255 255 / .10);
  --ds-control-secondary-shadow: -4px -4px 9px rgb(75 86 102 / .2), 5px 6px 12px rgb(3 6 10 / .42);
}
:root[data-theme="light"], .sf-lab[data-theme="light"] {
  --ds-control-action-surface: linear-gradient(145deg, var(--ds-control-highlight), var(--ds-control-surface));
  --ds-control-field-shadow: inset 8px 8px 14px rgb(169 181 197 / .68), inset -8px -8px 15px rgb(255 255 255 / .96);
  --ds-control-recessed-shadow: inset 6px 6px 12px rgb(151 163 183 / .38), inset -6px -6px 12px rgb(255 255 255 / .96), 0 1px 2px rgb(120 130 150 / .08);
  --ds-control-action-shadow: -7px -7px 14px rgb(255 255 255 / 1), 8px 10px 19px rgb(133 148 170 / .38), inset 2px 2px 2px rgb(255 255 255 / .96), inset -2px -2px 3px rgb(148 162 183 / .18);
  --ds-control-secondary-shadow: -5px -5px 11px rgb(255 255 255 / .8), 6px 7px 13px rgb(137 150 170 / .28);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ds-control-action-surface: transparent;
    --ds-control-field-shadow: inset 3px 3px 7px rgb(5 8 12 / .48), inset -3px -3px 7px rgb(75 85 101 / .28), 0 1px 2px rgb(0 0 0 / .14);
    --ds-control-recessed-shadow: var(--ds-control-field-shadow);
    --ds-control-action-shadow: -6px -6px 13px rgb(80 91 108 / .25), 8px 10px 20px rgb(3 6 10 / .42), inset 1px 1px 1px rgb(255 255 255 / .10);
    --ds-control-secondary-shadow: -4px -4px 9px rgb(75 86 102 / .2), 5px 6px 12px rgb(3 6 10 / .42);
  }
}