@font-face {
  font-family: 'Unbounded';
  /*src: url('../assets/fonts/roadradio_bold.otf') format('opentype');*/
  font-weight: 700;
  font-style: normal;
}

:root,
[data-theme="dark"] {
  --bg:         #1e1e2a;
  --bg-light:   #2a2a3d;
  --bg-card:    #252537;
  --purple:     #8b5df6;
  --purple-dark:#5524bd;
  --purple-mid: #381b76;
  --lime:       #b2ef2c;
  --white:      #ffffff;
  --white-70:   rgba(255,255,255,0.7);
  --white-40:   rgba(255,255,255,0.4);
  --white-14:   rgba(255,255,255,0.14);
  --white-08:   rgba(255,255,255,0.08);
  --yellow:     #fee06d;
  --yellow-light:#ffeb9e;
  --blue:       #4196e8;
  --green:      #1aaa76;
  --green-light:#2ce4a2;

  --r-xs:  8px;
  --r-s:   12px;
  --r-m:   16px;
  --r-l:   20px;
  --r-xl:  24px;
  --r-xxl: 500px;

  --header-h: 112px;
  --container-pad: 180px;

  /* toggle */
  --toggle-bg:       var(--purple);
  --toggle-thumb:    #ffffff;
  --toggle-thumb-x:  22px;

  --menu-bg:    #1e1e2a;
  --icon-color: rgba(255,255,255,0.85);
  --icon-stroke: rgba(255,255,255,0.85);
  --card-bg:    #252537;

  --transition: 0.18s ease;
}

[data-theme="light"] {
  --bg:         #f5f1e7;
  --bg-light:   #fffef9;
  --bg-card:    #fffef9;
  --white:      #1a1a2e;
  --white-70:   rgba(26,26,46,0.6);
  --white-40:   rgba(26,26,46,0.4);
  --white-14:   rgba(26,26,46,0.1);
  --white-08:   rgba(26,26,46,0.05);
  --menu-bg:    #f0ece0;
  --icon-color: rgba(26,26,46,0.75);
  --icon-stroke: rgba(26,26,46,0.75);
  --card-bg:    #fffef9;
  --toggle-bg:       rgba(26,26,46,0.18);
  --toggle-thumb:    #1a1a2e;
  --toggle-thumb-x:  3px;
}