:root {
  /* brand */
  --pri: #f8a834;
  --pri-d: #cd7900;
  --pri-l: #ffb03e;
  --pri-s: #ffa722;
  --pri-g: #ffa722b0;
  --neg: #cd3524;
  --neg-soft: rgba(228, 98, 83, 0.2);

  /* surfaces */
  --root-bg: #120801;
  --pnl: #12141f;
  --pnl-r: #181a29;
  --grad-1: #4d3ae0;
  --grad-2: #2c1f8f;
  --grad-3: #1a1030;

  /* ink */
  --fg-1: rgba(255, 255, 255, 1);
  --fg-2: rgba(255, 255, 255, 0.9);
  --fg-3: rgba(255, 255, 255, 0.7);
  --fg-4: rgba(255, 255, 255, 0.5);
  --fg-5: rgba(255, 255, 255, 0.3);
  --fg-6: rgba(255, 255, 255, 0.2);
  --fg-7: rgba(255, 255, 255, 0.1);
  --bk-1: rgba(13, 14, 18, 1);
  --bk-2: rgba(13, 14, 18, 0.8);
  --bk-3: rgba(13, 14, 18, 0.6);
  --bk-4: rgba(13, 14, 18, 0.4);

  /* type */
  --ff-base: "Store Sans", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fz-1: 12px;
  --fz-2: 14px;
  --fz-3: 16px;
  --fz-4: 18px;
  --fz-5: 20px;
  --lh-1: 1.15;
  --lh-2: 1.4;
  --ls-1: 0.02em;
  --ls-2: 0.06em;
  --ls-3: 0.1em;

  /* space */
  --gp-0: 8px;
  --gp-1: 12px;
  --gp-2: 14px;
  --gp-3: 16px;
  --gp-4: 24px;
  --gp-5: 32px;

  /* radius */
  --rd-1: 2px;
  --rd-2: 4px;
  --rd-3: 8px;
  --rd-4: 16px;
  --rd-p: 999px;

  /* layout */
  --wrap-max: 1200px;
  --bar-h: 76px;
  --bar-h-sm: 56px;

  /* shadows */
  --sh-btn: 0 0 20px rgba(159, 109, 24, 0.65);
  --sh-pop: 0 0 60px rgba(255, 255, 255, 0.25);
}