/* ==========================================================================
   NM-Scripts - design tokens
   Lifted from the nm-ui kit the scripts themselves are built on, so the store
   and the products look like they came from the same place.
   ========================================================================== */

:root {
  /* surfaces --------------------------------------------------------- */
  --nm-bg: #08090d;
  --nm-bg-2: #0b0d12;
  --nm-solid: #101014;
  --nm-solid-raised: #1a1a20;
  --nm-panel: rgba(255, 255, 255, 0.03);
  --nm-panel-raised: rgba(255, 255, 255, 0.055);
  --nm-panel-hover: rgba(255, 255, 255, 0.09);

  /* borders ---------------------------------------------------------- */
  --nm-border: rgba(255, 255, 255, 0.06);
  --nm-border-strong: rgba(255, 255, 255, 0.12);

  /* text ------------------------------------------------------------- */
  --nm-text: #f4f4f6;
  --nm-text-dim: #9a9aa4;
  --nm-text-muted: #61616b;

  /* accent ----------------------------------------------------------- */
  --nm-accent: #22d3ee;
  --nm-accent-bright: #67e8f9;
  --nm-accent-soft: rgba(34, 211, 238, 0.1);
  --nm-accent-line: rgba(34, 211, 238, 0.28);
  --nm-accent-glow: rgba(34, 211, 238, 0.16);
  --nm-violet: #b06ef0;
  --nm-violet-soft: rgba(176, 110, 240, 0.12);

  /* status ----------------------------------------------------------- */
  --nm-success: #4ade80;
  --nm-success-soft: rgba(74, 222, 128, 0.1);
  --nm-success-line: rgba(74, 222, 128, 0.26);
  --nm-danger: #f87171;
  --nm-danger-soft: rgba(248, 113, 113, 0.1);
  --nm-warning: #fbbf24;

  /* geometry --------------------------------------------------------- */
  --nm-r-xs: 4px;
  --nm-r-sm: 6px;
  --nm-r: 10px;
  --nm-r-lg: 14px;
  --nm-r-xl: 20px;
  --nm-r-pill: 999px;

  --nm-gap-xs: 4px;
  --nm-gap-sm: 8px;
  --nm-gap: 12px;
  --nm-gap-lg: 16px;
  --nm-gap-xl: 24px;

  /* type ------------------------------------------------------------- */
  --nm-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --nm-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
    Consolas, monospace;

  --nm-fs-micro: 10px;
  --nm-fs-xs: 11px;
  --nm-fs-sm: 12px;
  --nm-fs: 13px;
  --nm-fs-md: 15px;
  --nm-fs-lg: 18px;
  --nm-fs-xl: 22px;
  --nm-fs-2xl: 28px;
  --nm-fs-3xl: 36px;

  --nm-track: 0.08em;
  --nm-track-wide: 0.14em;

  /* effects ---------------------------------------------------------- */
  --nm-shadow-panel: 0 8px 24px rgba(0, 0, 0, 0.35);
  --nm-shadow-pop: 0 20px 50px rgba(0, 0, 0, 0.6);
  --nm-shadow-frame: 0 40px 90px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.04);

  --nm-speed: 140ms;
  --nm-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* layout ----------------------------------------------------------- */
  --nm-shell: 1180px;
  --nm-header: 68px;
}