:root{
  --bg:#0c0c0c;
  --bg2:#161616;
  --bg3:#1f1f1f;
  --bg4:#2a2a2a;

  --border:#252525;
  --border2:#333;

  --acc:#E8602C;
  --acc2:#ff7540;
  --acc-dim:rgba(232,96,44,.12);

  --text:#f0f0f0;
  --text2:#777;
  --text3:#444;

  --green:#22c55e;
  --yellow:#f59e0b;
  --red:#ef4444;

  --blue:#3b82f6;
  --purple:#8b5cf6;
  --cyan:#06b6d4;

  --sidebar:210px;
  --r:12px;

  /* TRANSITIONS */
  --tr-fast:.12s ease;
  --tr:.18s ease;
  --tr-slow:.28s cubic-bezier(.22,1,.36,1);

  /* SHADOWS */
  --shadow-sm:0 2px 10px rgba(0,0,0,.12);
  --shadow-md:0 10px 30px rgba(0,0,0,.22);}

.light{
  --bg:#f4f3ef;
  --bg2:#fff;
  --bg3:#f0efe9;
  --bg4:#e8e7e0;
  --border:#e2e1d8;
  --border2:#d0cfc6;
  --text:#111;
  --text2:#666;
  --text3:#bbb;}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;}

html,
body{
  height:100%;
  overflow:hidden;}

body{
  font-family:Sora,system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:13px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;}

.hidden{display:none!important;}

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

button{cursor:pointer;
  transition:
    background var(--tr),
    border-color var(--tr),
    color var(--tr),
    transform var(--tr-fast),
    opacity var(--tr);}

/* ════════════════════════════════════════════════════════ */
/*                        ANIMATIONS                        */
/* ════════════════════════════════════════════════════════ */
@keyframes fadeUp{
  from{opacity:0;
    transform:translateY(12px);}
  to{opacity:1;
    transform:translateY(0);}}

@keyframes pulse{0%,
  100%{opacity:1;}
  50%{opacity:.45;}}

@keyframes slideUp{
  from{
    opacity:0;
    transform:translateY(20px);}
  to{opacity:1;
    transform:translateY(0);}}