/* Nash — Slider de vidro (Figma N.A.S.H. DS 327:727, "Volume Slider").
   O trilho em pílula que a referência desenha a 480 × 112 (o dobro de
   240 × 56, o tamanho large daqui): placa a 32% com o vidro desfocado atrás,
   stroke de 1,5 por dentro a branco 15%, e por baixo do conteúdo a faixa
   preenchida até o valor — branco 4% com stroke de 11%, cantos 100 à
   esquerda e 4 à direita. Ícone e valor (Archivo 600) à esquerda, dentro.

   Nomes pelo mapa de vocabulário (docs/vocabulario-mapa.json, entrada
   slider, /componentes/63; regras da casa §3): a peça é .nash-slider;
   partes nash-slider-track, -range, -thumb (mais -halo, -spotlight, -icon,
   -value); variante data-size (small|medium|large) e data-mode; estado pelo
   input nativo (:active, :focus-visible, :disabled) e por aria-disabled,
   data-state só nas congeladas; token --nash-slider-<parte>; o que o JS
   escreve, --nash-runtime-value (0 a 1) e --nash-runtime-spotlight-x/y;
   eventos nash:input e nash:change.

   A base é um <input type="range"> nativo, dentro da casca, invisível por
   cima de tudo: é ele que recebe o ponteiro, o teclado e o foco, e o JS só
   traduz o valor em --nash-runtime-value. Sem o JS (sem data-mounted) o
   input nativo aparece com accent-color, e nada mais.

   Adaptações (docs/slider.md): o Figma desenha um tamanho e um estado, sem
   alça; hover, arrasto, teclado, foco e desabilitado são da peça. O thumb do
   mapa é a borda viva da faixa: um traço de 2px no accent, que só aparece
   com o ponteiro. A luz do cursor, o anel de accent e a aura são os da
   família (Icon Button, Button, Switch, Card).

   Tempo e curva vêm do kit (nash-tokens.css) com fallback próprio; tudo
   passa por --nash-slider-time-scale, ou pela --nash-escala da família.

   Documentação: docs/slider.md. Contrato: src/renderer/slider.test.js.
   Fonte única: o app recebe pelo build:kit (src/renderer/kit/), o PWA pelo
   build:web (web/vendor/). Carregar depois de nash-componentes.css.
   nash-slider.js completa a anatomia (trilho, faixa, thumb, aura, luz),
   escreve o valor e a luz do cursor e emite nash:input e nash:change. */

/* Registrados pra interpolar: o accent, o valor (o que o teclado move em
   140ms), os dois eixos da luz (os mesmos nomes em qualquer peça que os
   escreva) e as duas bordas da aura. */
@property --nash-slider-accent {
  syntax: '<color>';
  inherits: true;
  initial-value: #ffffff;
}

@property --nash-runtime-value {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --nash-runtime-spotlight-x {
  syntax: '<length-percentage>';
  inherits: false;
  initial-value: 50%;
}

@property --nash-runtime-spotlight-y {
  syntax: '<length-percentage>';
  inherits: false;
  initial-value: 50%;
}

@property --nash-slider-halo-inner {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@property --nash-slider-halo-outer {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

/* ---------- tempo e curva ----------
   Os tempos das cinco peças anteriores, com os mesmos valores, mais o
   deslocamento do valor pelo teclado (140). */
.nash-slider {
  --nash-slider-duration-press: calc(var(--nash-dur-pressao, 100ms) * var(--nash-slider-time-scale, var(--nash-escala, 1)));
  --nash-slider-duration-release: calc(var(--nash-dur-solta, 160ms) * var(--nash-slider-time-scale, var(--nash-escala, 1)));
  --nash-slider-duration-thumb: calc(var(--nash-dur-ponto, 160ms) * var(--nash-slider-time-scale, var(--nash-escala, 1)));
  --nash-slider-duration-state: calc(var(--nash-dur-estado, 180ms) * var(--nash-slider-time-scale, var(--nash-escala, 1)));
  --nash-slider-duration-ring: calc(var(--nash-dur-brilho, 260ms) * var(--nash-slider-time-scale, var(--nash-escala, 1)));
  --nash-slider-duration-spotlight: calc(var(--nash-dur-brilho, 260ms) * var(--nash-slider-time-scale, var(--nash-escala, 1)));
  --nash-slider-duration-spotlight-follow: calc(70ms * var(--nash-slider-time-scale, var(--nash-escala, 1)));
  --nash-slider-duration-value: calc(var(--nash-dur-micro, 140ms) * var(--nash-slider-time-scale, var(--nash-escala, 1)));
  --nash-slider-duration-enter: calc(420ms * var(--nash-slider-time-scale, var(--nash-escala, 1)));
  --nash-slider-duration-aura: calc(420ms * var(--nash-slider-time-scale, var(--nash-escala, 1)));
  --nash-slider-duration-fade: calc(600ms * var(--nash-slider-time-scale, var(--nash-escala, 1)));
  --nash-slider-stagger-step: calc(60ms * var(--nash-slider-time-scale, var(--nash-escala, 1)));
  --nash-slider-ease: var(--nash-curva-saida, cubic-bezier(0.16, 1, 0.3, 1));
}

/* ---------- cor ----------
   Sem data-mode, o accent do kit, herdado. Com data-mode, um dos cinco modos
   do Figma, a mesma tabela das irmãs. O halo é o accent a 48%. */
:root {
  --nash-slider-accent: var(--accent, #ffffff);
}

.nash-slider {
  --nash-slider-halo: color-mix(in srgb, var(--nash-slider-accent) 48%, transparent);
  --nash-slider-spotlight-alpha: 10%;
  --nash-slider-plate: var(--nash-placa, rgba(13, 15, 18, 0.32));
  --nash-slider-plate-hover: var(--nash-placa-hover, rgba(31, 33, 40, 0.4));
  --nash-slider-plate-pressed: var(--nash-placa-pressed, rgba(8, 10, 13, 0.32));
  --nash-slider-range-fill: rgba(255, 255, 255, 0.04);
  --nash-slider-range-fill-active: color-mix(in srgb, var(--nash-slider-accent) 14%, transparent);
  --nash-slider-range-stroke: rgba(255, 255, 255, 0.11);
  --nash-slider-ink: var(--text-forte, #ffffff);
  --nash-slider-ink-mid: var(--text-mid, rgba(255, 255, 255, 0.55));
}

.nash-slider[data-mode='chat'],
.nash-slider[data-mode='voz'] {
  --nash-slider-accent: var(--accent-chat, #4dc9ff);
}

.nash-slider[data-mode='design'] {
  --nash-slider-accent: var(--accent-design, #b36bff);
}

.nash-slider[data-mode='imagem'] {
  --nash-slider-accent: var(--accent-image, #ffb454);
}

.nash-slider[data-mode='social'] {
  --nash-slider-accent: var(--accent-social, #5fe0a5);
}

/* ---------- o stroke por dentro ----------
   O anel de 1,5px da família: dois gradientes, o content-box tira o miolo e
   sobra a borda. No trilho, ::before é o stroke branco (15 › 6 › 2 › 0) e
   ::after o anel de accent (45 › 18 › 6 › 0: hover 70%, arrasto e foco
   100%). Na faixa, ::before é o stroke do Figma (branco 11%, uniforme) e
   ::after o mesmo stroke no accent a 45%, que o arrasto acende. */
.nash-slider-track::before,
.nash-slider-track::after,
.nash-slider-range::before,
.nash-slider-range::after,
.nash-slider-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--nash-stroke, 1.5px);
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.nash-slider-track::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.06) 40%, rgba(255, 255, 255, 0.02) 75%, transparent);
}

.nash-slider-track::after {
  opacity: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--nash-slider-accent) 45%, transparent),
    color-mix(in srgb, var(--nash-slider-accent) 18%, transparent) 40%,
    color-mix(in srgb, var(--nash-slider-accent) 6%, transparent) 75%,
    transparent
  );
  transition: opacity var(--nash-slider-duration-ring) var(--nash-slider-ease);
}

.nash-slider-range::before {
  background: var(--nash-slider-range-stroke);
}

.nash-slider-range::after {
  opacity: 0;
  background: color-mix(in srgb, var(--nash-slider-accent) 45%, transparent);
  transition: opacity var(--nash-slider-duration-state) var(--nash-slider-ease);
}

/* ---------- a casca ----------
   A casca é a linha de conteúdo (ícone e valor) com o trilho por baixo e o
   input nativo por cima. Altura por data-size: 32 · 44 · 56 (o Figma, 112, é
   o large a 2×). A largura é da página. */
.nash-slider {
  --nash-slider-height: 44px;
  --nash-slider-halo-reach: 16px;
  --nash-slider-icon-size: 16px;
  --nash-slider-value-size: 13px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--nash-slider-gap, 10px);
  box-sizing: border-box;
  width: 100%;
  height: var(--nash-slider-height);
  margin: 0;
  padding: var(--nash-slider-padding, 0 12px);
  border-radius: var(--nash-r-pill, 999px);
  color: var(--nash-slider-ink);
  font-family: var(--font-sans, 'Archivo', system-ui, sans-serif);
  font-size: var(--nash-slider-value-size);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* O valor anda em 140 com a curva de saída (teclado, setValue); no arrasto
     a transição é 0 e a faixa segue o ponteiro. */
  transition:
    --nash-runtime-value var(--nash-slider-duration-value) var(--nash-slider-ease),
    --nash-slider-accent var(--nash-slider-duration-ring) var(--nash-slider-ease),
    opacity var(--nash-slider-duration-state) var(--nash-slider-ease);
  /* `backwards`, nunca `both`. Irmãos entram escalonados por
     --nash-runtime-index (0, 1, 2…), escrito pela página ou pelo JS. */
  animation: nash-slider-enter var(--nash-slider-duration-enter) var(--nash-slider-ease) calc(var(--nash-runtime-index, 0) * var(--nash-slider-stagger-step)) backwards;
}

.nash-slider[data-size='small'] {
  --nash-slider-height: 32px;
  --nash-slider-halo-reach: 12px;
  --nash-slider-icon-size: 14px;
  --nash-slider-value-size: 12px;
  gap: var(--nash-slider-gap, 8px);
  padding: var(--nash-slider-padding, 0 10px);
}

.nash-slider[data-size='large'] {
  --nash-slider-height: 56px;
  --nash-slider-halo-reach: 20px;
  --nash-slider-icon-size: 16px;
  --nash-slider-value-size: 14px;
  gap: var(--nash-slider-gap, 14px);
  padding: var(--nash-slider-padding, 0 12px 0 16px);
}

/* O input nativo: por cima de tudo, invisível, do tamanho da casca. O thumb
   nativo tem 1px de largura pra o ponteiro mapear o valor de borda a borda,
   como a faixa desenha. */
.nash-slider > input[type='range'] {
  position: absolute;
  inset: 0;
  z-index: 3;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.nash-slider > input[type='range']::-webkit-slider-runnable-track {
  height: 100%;
  background: transparent;
}

.nash-slider > input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1px;
  height: 100%;
  background: transparent;
}

.nash-slider > input[type='range']::-moz-range-thumb {
  width: 1px;
  height: 100%;
  border: 0;
  background: transparent;
}

/* Sem o JS: o input nativo aparece, com o accent, e é tudo. */
.nash-slider:not([data-mounted]) > input[type='range'] {
  position: static;
  height: auto;
  opacity: 1;
  accent-color: var(--nash-slider-accent);
}

/* ---------- o trilho ----------
   A pílula do Figma: placa a 32% com blur 28, stroke por dentro. */
.nash-slider-track {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--nash-slider-plate);
  -webkit-backdrop-filter: blur(var(--nash-vidro-blur, 28px)) saturate(var(--nash-vidro-sat, 1.85));
  backdrop-filter: blur(var(--nash-vidro-blur, 28px)) saturate(var(--nash-vidro-sat, 1.85));
  pointer-events: none;
  transition: background-color var(--nash-slider-duration-state) var(--nash-slider-ease);
}

/* ---------- a faixa ----------
   A parte preenchida, da borda esquerda até o valor: branco 4% com o stroke
   de 11%, cantos 100 à esquerda e 4 à direita, como o Figma. A largura é
   --nash-runtime-value × 100%, nunca menor que a altura (a cabeça redonda). */
.nash-slider-range {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--nash-runtime-value) * 100%);
  min-width: var(--nash-slider-height);
  border-radius: var(--nash-r-pill, 999px) 4px 4px var(--nash-r-pill, 999px);
  background-color: var(--nash-slider-range-fill);
  transition: background-color var(--nash-slider-duration-state) var(--nash-slider-ease);
}

/* ---------- o thumb ----------
   A borda viva da faixa: um traço de 2px no accent, a 3px da ponta, que só
   aparece com o ponteiro (160) e cresce 10% no arrasto. */
.nash-slider-thumb {
  position: absolute;
  top: 8px;
  right: 3px;
  bottom: 8px;
  width: 2px;
  border-radius: 1px;
  background: var(--nash-slider-accent);
  opacity: 0;
  box-shadow: 0 0 0 0 transparent;
  transition:
    opacity var(--nash-slider-duration-thumb) var(--nash-slider-ease),
    transform var(--nash-slider-duration-thumb) var(--nash-slider-ease),
    box-shadow var(--nash-slider-duration-thumb) var(--nash-slider-ease);
}

/* ---------- o conteúdo do Figma ----------
   Ícone (Icon/Volume2) e valor (Archivo 600), à esquerda, por cima da faixa.
   Os dois opcionais; a página escreve o que quiser. */
.nash-slider-icon {
  position: relative;
  z-index: 1;
  flex: none;
  width: var(--nash-slider-icon-size);
  height: var(--nash-slider-icon-size);
  color: var(--nash-slider-ink);
  pointer-events: none;
}

.nash-slider-icon > svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nash-slider-value {
  position: relative;
  z-index: 1;
  min-width: 2ch;
  pointer-events: none;
}

/* ---------- a aura ----------
   A luz larga em volta do trilho, num elemento próprio que segue o contorno
   (a técnica do Button): uma sombra do accent a 48% num elemento sem fundo,
   com a borda de dentro no tamanho (--nash-slider-halo-inner) e a de fora no
   desfoque (--nash-slider-halo-outer). Pegar abre a borda de fora (0 → 16 em
   420); soltar move a borda de dentro (0 → 16 em 600) enquanto a opacidade
   cai: a luz é comida de dentro pra fora. */
.nash-slider-halo {
  --nash-slider-halo-inner: var(--nash-slider-halo-reach);
  --nash-slider-halo-outer: 0px;
  position: absolute;
  inset: calc(-1 * var(--nash-slider-halo-inner));
  z-index: -2;
  border-radius: var(--nash-r-pill, 999px);
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 max(0px, calc(var(--nash-slider-halo-outer) - var(--nash-slider-halo-inner))) 0 var(--nash-slider-halo);
  transition:
    opacity var(--nash-slider-duration-fade) ease-in-out,
    --nash-slider-halo-inner var(--nash-slider-duration-fade) ease-in-out,
    --nash-slider-halo-outer 0s linear var(--nash-slider-duration-fade);
}

/* ---------- a luz do cursor ----------
   A das irmãs, em pixels: névoa de 160px no accent a 10% e o anel aceso no
   ponto mais próximo do ponteiro (100px, accent 70%). Segue em 70, apaga em
   260. Dentro do trilho, por cima da faixa. */
.nash-slider-spotlight {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    var(--nash-slider-spotlight-size, 160px) var(--nash-slider-spotlight-size, 160px) at var(--nash-runtime-spotlight-x) var(--nash-runtime-spotlight-y),
    color-mix(in srgb, var(--nash-slider-accent) var(--nash-slider-spotlight-alpha), transparent),
    transparent 70%
  );
  transition:
    opacity var(--nash-slider-duration-spotlight) var(--nash-slider-ease),
    --nash-runtime-spotlight-x var(--nash-slider-duration-spotlight-follow) linear,
    --nash-runtime-spotlight-y var(--nash-slider-duration-spotlight-follow) linear;
}

.nash-slider-spotlight::before {
  background: radial-gradient(
    100px 100px at var(--nash-runtime-spotlight-x) var(--nash-runtime-spotlight-y),
    color-mix(in srgb, var(--nash-slider-accent) 70%, transparent),
    transparent 70%
  );
}

/* ---------- hover ----------
   A placa sobe à de hover em 180, o anel de accent a 70% em 260, a luz
   acende em 260 e o thumb aparece em 160. */
.nash-slider:is(:hover, [data-state='hover']):not([aria-disabled='true']):not(:has(> input:disabled)) .nash-slider-track {
  background-color: var(--nash-slider-plate-hover);
}

.nash-slider:is(:hover, [data-state='hover']):not([aria-disabled='true']):not(:has(> input:disabled)) .nash-slider-track::after {
  opacity: 0.7;
}

.nash-slider:hover:not([data-state]):not([aria-disabled='true']):not(:has(> input:disabled)) .nash-slider-spotlight {
  opacity: 1;
}

.nash-slider:is(:hover, [data-state='hover'], [data-state='pressed']):not([aria-disabled='true']):not(:has(> input:disabled)) .nash-slider-thumb {
  opacity: 1;
}

/* ---------- arrasto (o input :active) ----------
   Pegar: a placa desce à pressed em 100; o thumb cresce 10% e ganha o halo
   em 160; a faixa toma o accent a 14% e o stroke dela acende a 45% em 180; o
   anel do trilho vai a 100% em 260; a aura se abre até o alcance em 420. A
   faixa segue o ponteiro sem transição. Soltar: placa em 160, thumb 160,
   faixa 180, anel 260, a aura comida de dentro pra fora em 600. */
.nash-slider:is(:has(> input:active), [data-state='pressed']):not([aria-disabled='true']):not(:has(> input:disabled)) {
  --nash-slider-spotlight-alpha: 22%;
  transition-duration: 0s, var(--nash-slider-duration-ring), var(--nash-slider-duration-state);
}

.nash-slider:is(:has(> input:active), [data-state='pressed']):not([aria-disabled='true']):not(:has(> input:disabled)) .nash-slider-track {
  background-color: var(--nash-slider-plate-pressed);
  transition-duration: var(--nash-slider-duration-press);
}

.nash-slider:is(:has(> input:active), [data-state='pressed']):not([aria-disabled='true']):not(:has(> input:disabled)) .nash-slider-track::after {
  opacity: 1;
}

.nash-slider:is(:has(> input:active), [data-state='pressed']):not([aria-disabled='true']):not(:has(> input:disabled)) .nash-slider-range {
  background-color: var(--nash-slider-range-fill-active);
}

.nash-slider:is(:has(> input:active), [data-state='pressed']):not([aria-disabled='true']):not(:has(> input:disabled)) .nash-slider-range::after {
  opacity: 1;
}

.nash-slider:is(:has(> input:active), [data-state='pressed']):not([aria-disabled='true']):not(:has(> input:disabled)) .nash-slider-thumb {
  opacity: 1;
  transform: scaleY(1.1);
  box-shadow: 0 0 8px 0 var(--nash-slider-halo);
}

.nash-slider:is(:has(> input:active), [data-state='pressed']):not([aria-disabled='true']):not(:has(> input:disabled)) .nash-slider-halo {
  --nash-slider-halo-inner: 0px;
  --nash-slider-halo-outer: var(--nash-slider-halo-reach);
  opacity: 1;
  transition:
    opacity var(--nash-slider-duration-aura) var(--nash-slider-ease),
    --nash-slider-halo-inner 0s,
    --nash-slider-halo-outer var(--nash-slider-duration-aura) var(--nash-slider-ease);
}

/* ---------- foco ----------
   O foco visível do input nativo (teclado) desenha o outline na casca e
   acende o anel de accent e o thumb. */
.nash-slider:has(> input:focus-visible) {
  outline: 2px solid var(--nash-slider-accent);
  outline-offset: 2px;
}

.nash-slider:has(> input:focus-visible) .nash-slider-track::after,
.nash-slider:has(> input:focus-visible) .nash-slider-thumb {
  opacity: 1;
}

/* ---------- desabilitado ---------- */
.nash-slider:is([aria-disabled='true'], :has(> input:disabled)) {
  opacity: 0.4;
  cursor: default;
}

.nash-slider:is([aria-disabled='true'], :has(> input:disabled)) > input[type='range'] {
  cursor: default;
  pointer-events: none;
}

/* ---------- as variantes congeladas ----------
   data-state="default|hover|pressed" só na bancada: não respondem ao
   ponteiro e não entram. */
.nash-slider[data-state] {
  pointer-events: none;
  animation: none;
}

/* ---------- quadros ---------- */
@keyframes nash-slider-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- movimento reduzido ----------
   Cor e opacidade em 100ms; sem scale nem entrada; o valor salta; a aura é
   só opacidade, com as bordas paradas. Vale por prefers-reduced-motion e por
   [data-motion="reduced"] num ancestral. */
@media (prefers-reduced-motion: reduce) {
  .nash-slider {
    animation: none;
  }

  .nash-slider,
  .nash-slider-track,
  .nash-slider-track::after,
  .nash-slider-range,
  .nash-slider-range::after,
  .nash-slider-thumb,
  .nash-slider-spotlight,
  .nash-slider-halo {
    transition-duration: 100ms;
    transition-delay: 0s;
  }

  .nash-slider-halo {
    --nash-slider-halo-inner: 0px;
    --nash-slider-halo-outer: var(--nash-slider-halo-reach);
  }

  .nash-slider:is(:has(> input:active), [data-state='pressed']) .nash-slider-thumb {
    transform: none;
  }
}

[data-motion='reduced'] .nash-slider {
  animation: none;
}

[data-motion='reduced'] .nash-slider,
[data-motion='reduced'] .nash-slider-track,
[data-motion='reduced'] .nash-slider-track::after,
[data-motion='reduced'] .nash-slider-range,
[data-motion='reduced'] .nash-slider-range::after,
[data-motion='reduced'] .nash-slider-thumb,
[data-motion='reduced'] .nash-slider-spotlight,
[data-motion='reduced'] .nash-slider-halo {
  transition-duration: 100ms;
  transition-delay: 0s;
}

[data-motion='reduced'] .nash-slider-halo {
  --nash-slider-halo-inner: 0px;
  --nash-slider-halo-outer: var(--nash-slider-halo-reach);
}

[data-motion='reduced'] .nash-slider:is(:has(> input:active), [data-state='pressed']) .nash-slider-thumb {
  transform: none;
}

/* ---------- o modo claro ----------
   Sobre data-tema="claro", as placas vêm do kit; a faixa e a tinta viram
   escuras. */
:root[data-tema='claro'] .nash-slider {
  --nash-slider-range-fill: rgba(20, 20, 15, 0.05);
  --nash-slider-range-stroke: rgba(20, 20, 15, 0.12);
  --nash-slider-ink: #14140f;
  --nash-slider-ink-mid: rgba(20, 20, 15, 0.55);
}